@lifi/widget 4.3.1 → 4.5.0

package/dist/esm/components/TokenRate/TokenRate.d.ts

@@ -0,0 +1,10 @@
+import { RouteExtended } from "@lifi/sdk";
+import { TypographyProps } from "@mui/material";
+//#region src/components/TokenRate/TokenRate.d.ts
+interface TokenRateProps extends TypographyProps {
+  route: RouteExtended;
+}
+declare const TokenRate: React.FC<TokenRateProps>;
+//#endregion
+export { TokenRate };
+//# sourceMappingURL=TokenRate.d.ts.map

package/dist/esm/components/TokenRate/TokenRate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenRate.d.ts","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.tsx"],"mappings":";;;UAOU,uBAAuB;EAC/B,OAAO;;cAaI,WAAW,MAAM,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"TokenRate.js","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.tsx"],"sourcesContent":["import { formatUnits, type RouteExtended } from '@lifi/sdk'\nimport type { TypographyProps } from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { create } from 'zustand'\nimport { TokenRateTypography } from './TokenRate.style.js'\n\ninterface TokenRateProps extends TypographyProps {\n  route: RouteExtended\n}\n\ninterface TokenRateState {\n  isForward: boolean\n  toggleIsForward(): void\n}\n\nconst useTokenRate = create<TokenRateState>((set) => ({\n  isForward: true,\n  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),\n}))\n\nexport const TokenRate: React.FC<TokenRateProps> = ({ route }) => {\n  const { t } = useTranslation()\n  const { isForward, toggleIsForward } = useTokenRate()\n\n  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {\n    e.stopPropagation()\n    toggleIsForward()\n  }\n\n  const lastStep = route.steps.at(-1)\n\n  const fromToken = {\n    ...route.fromToken,\n    amount: BigInt(route.fromAmount),\n  }\n  const toToken = {\n    ...(lastStep?.execution?.toToken ??\n      lastStep?.action.toToken ??\n      route.toToken),\n    amount: lastStep?.execution?.toAmount\n      ? BigInt(lastStep.execution.toAmount)\n      : BigInt(route.toAmount),\n  }\n\n  const fromToRate =\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))\n  const toFromRate =\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))\n\n  const rateText = isForward\n    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`\n    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`\n\n  return (\n    <TokenRateTypography onClick={toggleRate} role=\"button\">\n      {rateText}\n    </TokenRateTypography>\n  )\n}\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe,QAAwB,SAAS;CACpD,WAAW;CACX,uBAAuB,KAAK,WAAW,EAAE,WAAW,CAAC,MAAM,UAAU,EAAE;AACzE,EAAE;AAEF,MAAa,aAAuC,EAAE,YAAY;CAChE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,WAAW,oBAAoB,aAAa;CAEpD,MAAM,cAAkD,MAAM;EAC5D,EAAE,gBAAgB;EAClB,gBAAgB;CAClB;CAEA,MAAM,WAAW,MAAM,MAAM,GAAG,EAAE;CAElC,MAAM,YAAY;EAChB,GAAG,MAAM;EACT,QAAQ,OAAO,MAAM,UAAU;CACjC;CACA,MAAM,UAAU;EACd,GAAI,UAAU,WAAW,WACvB,UAAU,OAAO,WACjB,MAAM;EACR,QAAQ,UAAU,WAAW,WACzB,OAAO,SAAS,UAAU,QAAQ,IAClC,OAAO,MAAM,QAAQ;CAC3B;CAEA,MAAM,aACJ,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC,IAChE,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC;CACtE,MAAM,aACJ,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC,IACpE,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC;CAMlE,OACE,oBAAC,qBAAD;EAAqB,SAAS;EAAY,MAAK;YALhC,YACb,KAAK,UAAU,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,QAAQ,WACrF,KAAK,QAAQ,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,UAAU;CAKlE,CAAA;AAEzB"}
+{"version":3,"file":"TokenRate.js","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.tsx"],"sourcesContent":["import { formatUnits, type RouteExtended } from '@lifi/sdk'\nimport type { TypographyProps } from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { create } from 'zustand'\nimport { TokenRateTypography } from './TokenRate.style.js'\n\ninterface TokenRateProps extends TypographyProps {\n  route: RouteExtended\n}\n\ninterface TokenRateState {\n  isForward: boolean\n  toggleIsForward(): void\n}\n\nconst useTokenRate = create<TokenRateState>((set) => ({\n  isForward: true,\n  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),\n}))\n\nexport const TokenRate: React.FC<TokenRateProps> = ({ route }) => {\n  const { t } = useTranslation()\n  const { isForward, toggleIsForward } = useTokenRate()\n\n  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {\n    e.stopPropagation()\n    toggleIsForward()\n  }\n\n  const lastStep = route.steps.at(-1)\n\n  const fromToken = {\n    ...route.fromToken,\n    amount: BigInt(route.fromAmount),\n  }\n  const toToken = {\n    ...(lastStep?.execution?.toToken ??\n      lastStep?.action.toToken ??\n      route.toToken),\n    amount: lastStep?.execution?.toAmount\n      ? BigInt(lastStep.execution.toAmount)\n      : BigInt(route.toAmount),\n  }\n\n  const fromToRate =\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))\n  const toFromRate =\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))\n\n  const rateText = isForward\n    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`\n    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`\n\n  return (\n    <TokenRateTypography onClick={toggleRate} role=\"button\">\n      {rateText}\n    </TokenRateTypography>\n  )\n}\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe,QAAwB,SAAS;CACpD,WAAW;CACX,uBAAuB,KAAK,WAAW,EAAE,WAAW,CAAC,MAAM,UAAU,EAAE;AACzE,EAAE;AAEF,MAAa,aAAuC,EAAE,YAAY;CAChE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,WAAW,oBAAoB,aAAa;CAEpD,MAAM,cAAkD,MAAM;EAC5D,EAAE,gBAAgB;EAClB,gBAAgB;CAClB;CAEA,MAAM,WAAW,MAAM,MAAM,GAAG,EAAE;CAElC,MAAM,YAAY;EAChB,GAAG,MAAM;EACT,QAAQ,OAAO,MAAM,UAAU;CACjC;CACA,MAAM,UAAU;EACd,GAAI,UAAU,WAAW,WACvB,UAAU,OAAO,WACjB,MAAM;EACR,QAAQ,UAAU,WAAW,WACzB,OAAO,SAAS,UAAU,QAAQ,IAClC,OAAO,MAAM,QAAQ;CAC3B;CAEA,MAAM,aACJ,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC,IAChE,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC;CACtE,MAAM,aACJ,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC,IACpE,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC;CAMlE,OACE,oBAAC,qBAAD;EAAqB,SAAS;EAAY,MAAK;EALhC,UAAA,YACb,KAAK,UAAU,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,QAAQ,WACrF,KAAK,QAAQ,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,UAAU;CAKlE,CAAA;AAEzB"}

package/dist/esm/components/Tools/ToolItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolItem.js","names":["ListItemText"],"sources":["../../../../src/components/Tools/ToolItem.tsx"],"sourcesContent":["import { Avatar, Checkbox, ListItemAvatar } from '@mui/material'\nimport { memo, type NamedExoticComponent } from 'react'\nimport { ListItemText } from '../ListItemText.js'\nimport { SettingsListItemButton } from '../SettingsListItemButton.js'\n\ninterface ToolItemProps {\n  tool: any\n  typeKey: string\n  isEnabled: boolean\n  onToggle: (key: string) => void\n}\n\nexport const ToolItem: NamedExoticComponent<ToolItemProps> =\n  memo<ToolItemProps>(({ tool, typeKey, isEnabled, onToggle }) => {\n    const handleClick = () => {\n      onToggle(tool.key)\n    }\n\n    const handleCheckboxClick = (e: React.MouseEvent) => {\n      e.stopPropagation()\n      onToggle(tool.key)\n    }\n\n    return (\n      <SettingsListItemButton onClick={handleClick}>\n        <ListItemAvatar>\n          <Avatar src={tool.logoURI} alt={tool.name}>\n            {tool.name[0]}\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText primary={tool.name} />\n        <Checkbox\n          id={`${typeKey}-${tool.key}-checkbox`}\n          checked={isEnabled}\n          onChange={handleClick}\n          onClick={handleCheckboxClick}\n          sx={{ mr: -1 }}\n        />\n      </SettingsListItemButton>\n    )\n  })\n"],"mappings":";;;;;;AAYA,MAAa,WACX,MAAqB,EAAE,MAAM,SAAS,WAAW,eAAe;CAC9D,MAAM,oBAAoB;EACxB,SAAS,KAAK,GAAG;CACnB;CAEA,MAAM,uBAAuB,MAAwB;EACnD,EAAE,gBAAgB;EAClB,SAAS,KAAK,GAAG;CACnB;CAEA,OACE,qBAAC,wBAAD;EAAwB,SAAS;YAAjC;GACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,KAAK,KAAK;IAAS,KAAK,KAAK;cAClC,KAAK,KAAK;GACL,CAAA,EACM,CAAA;GAChB,oBAACA,gBAAD,EAAc,SAAS,KAAK,KAAO,CAAA;GACnC,oBAAC,UAAD;IACE,IAAI,GAAG,QAAQ,GAAG,KAAK,IAAI;IAC3B,SAAS;IACT,UAAU;IACV,SAAS;IACT,IAAI,EAAE,IAAI,GAAG;GACd,CAAA;EACqB;;AAE5B,CAAC"}
+{"version":3,"file":"ToolItem.js","names":["ListItemText"],"sources":["../../../../src/components/Tools/ToolItem.tsx"],"sourcesContent":["import { Avatar, Checkbox, ListItemAvatar } from '@mui/material'\nimport { memo, type NamedExoticComponent } from 'react'\nimport { ListItemText } from '../ListItemText.js'\nimport { SettingsListItemButton } from '../SettingsListItemButton.js'\n\ninterface ToolItemProps {\n  tool: any\n  typeKey: string\n  isEnabled: boolean\n  onToggle: (key: string) => void\n}\n\nexport const ToolItem: NamedExoticComponent<ToolItemProps> =\n  memo<ToolItemProps>(({ tool, typeKey, isEnabled, onToggle }) => {\n    const handleClick = () => {\n      onToggle(tool.key)\n    }\n\n    const handleCheckboxClick = (e: React.MouseEvent) => {\n      e.stopPropagation()\n      onToggle(tool.key)\n    }\n\n    return (\n      <SettingsListItemButton onClick={handleClick}>\n        <ListItemAvatar>\n          <Avatar src={tool.logoURI} alt={tool.name}>\n            {tool.name[0]}\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText primary={tool.name} />\n        <Checkbox\n          id={`${typeKey}-${tool.key}-checkbox`}\n          checked={isEnabled}\n          onChange={handleClick}\n          onClick={handleCheckboxClick}\n          sx={{ mr: -1 }}\n        />\n      </SettingsListItemButton>\n    )\n  })\n"],"mappings":";;;;;;AAYA,MAAa,WACX,MAAqB,EAAE,MAAM,SAAS,WAAW,eAAe;CAC9D,MAAM,oBAAoB;EACxB,SAAS,KAAK,GAAG;CACnB;CAEA,MAAM,uBAAuB,MAAwB;EACnD,EAAE,gBAAgB;EAClB,SAAS,KAAK,GAAG;CACnB;CAEA,OACE,qBAAC,wBAAD;EAAwB,SAAS;EAAjC,UAAA;GACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,KAAK,KAAK;IAAS,KAAK,KAAK;IAClC,UAAA,KAAK,KAAK;GACL,CAAA,EACM,CAAA;GAChB,oBAACA,gBAAD,EAAc,SAAS,KAAK,KAAO,CAAA;GACnC,oBAAC,UAAD;IACE,IAAI,GAAG,QAAQ,GAAG,KAAK,IAAI;IAC3B,SAAS;IACT,UAAU;IACV,SAAS;IACT,IAAI,EAAE,IAAI,GAAG;GACd,CAAA;EACqB;;AAE5B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tools.js","names":[],"sources":["../../../../src/components/Tools/Tools.tsx"],"sourcesContent":["import type { ToolsResponse } from '@lifi/sdk'\nimport { List } from '@mui/material'\nimport { type JSX, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport { ToolItem } from './ToolItem.js'\n\nexport type ToolCollectionTypes =\n  | ToolsResponse['exchanges']\n  | ToolsResponse['bridges']\n\ninterface ToolsProps {\n  filteredTools: ToolCollectionTypes\n  type: 'Bridges' | 'Exchanges'\n}\n\nexport const Tools = ({ filteredTools, type }: ToolsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'\n  const enabledTools = useSettingsStore((state) => state[`_enabled${type}`])\n  const { setToolValue } = useSettingsActions()\n\n  // Use ref to access current enabledTools without causing re-renders\n  const enabledToolsRef = useRef(enabledTools)\n  enabledToolsRef.current = enabledTools\n  const toggleCallbacks = useMemo(() => {\n    const callbacks: Record<string, () => void> = {}\n    filteredTools.forEach((tool) => {\n      callbacks[tool.key] = () => {\n        // Access current state via ref to avoid dependency on enabledTools\n        setToolValue(type, tool.key, !enabledToolsRef.current[tool.key])\n      }\n    })\n    return callbacks\n  }, [filteredTools, setToolValue, type])\n\n  if (!filteredTools.length) {\n    return <SearchNotFound message={t(`info.message.empty${type}List`)} />\n  }\n\n  return (\n    <List\n      className=\"long-list\"\n      disablePadding\n      data-testid={`${typeKey}-list`}\n      sx={{ px: 1.5, pb: 2 }}\n    >\n      {filteredTools.map((tool) => (\n        <ToolItem\n          key={tool.key}\n          tool={tool}\n          typeKey={typeKey}\n          isEnabled={enabledTools[tool.key]}\n          onToggle={toggleCallbacks[tool.key]}\n        />\n      ))}\n    </List>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAa,SAAS,EAAE,eAAe,WAAoC;CACzE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,eAAe,kBAAkB,UAAU,MAAM,WAAW,OAAO;CACzE,MAAM,EAAE,iBAAiB,mBAAmB;CAG5C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,gBAAgB,UAAU;CAC1B,MAAM,kBAAkB,cAAc;EACpC,MAAM,YAAwC,CAAC;EAC/C,cAAc,SAAS,SAAS;GAC9B,UAAU,KAAK,aAAa;IAE1B,aAAa,MAAM,KAAK,KAAK,CAAC,gBAAgB,QAAQ,KAAK,IAAI;GACjE;EACF,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAe;EAAc;CAAI,CAAC;CAEtC,IAAI,CAAC,cAAc,QACjB,OAAO,oBAAC,gBAAD,EAAgB,SAAS,EAAE,qBAAqB,KAAK,KAAK,EAAI,CAAA;CAGvE,OACE,oBAAC,MAAD;EACE,WAAU;EACV,gBAAA;EACA,eAAa,GAAG,QAAQ;EACxB,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;YAEpB,cAAc,KAAK,SAClB,oBAAC,UAAD;GAEQ;GACG;GACT,WAAW,aAAa,KAAK;GAC7B,UAAU,gBAAgB,KAAK;EAChC,GALM,KAAK,GAKX,CACF;CACG,CAAA;AAEV"}
+{"version":3,"file":"Tools.js","names":[],"sources":["../../../../src/components/Tools/Tools.tsx"],"sourcesContent":["import type { ToolsResponse } from '@lifi/sdk'\nimport { List } from '@mui/material'\nimport { type JSX, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport { ToolItem } from './ToolItem.js'\n\nexport type ToolCollectionTypes =\n  | ToolsResponse['exchanges']\n  | ToolsResponse['bridges']\n\ninterface ToolsProps {\n  filteredTools: ToolCollectionTypes\n  type: 'Bridges' | 'Exchanges'\n}\n\nexport const Tools = ({ filteredTools, type }: ToolsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'\n  const enabledTools = useSettingsStore((state) => state[`_enabled${type}`])\n  const { setToolValue } = useSettingsActions()\n\n  // Use ref to access current enabledTools without causing re-renders\n  const enabledToolsRef = useRef(enabledTools)\n  enabledToolsRef.current = enabledTools\n  const toggleCallbacks = useMemo(() => {\n    const callbacks: Record<string, () => void> = {}\n    filteredTools.forEach((tool) => {\n      callbacks[tool.key] = () => {\n        // Access current state via ref to avoid dependency on enabledTools\n        setToolValue(type, tool.key, !enabledToolsRef.current[tool.key])\n      }\n    })\n    return callbacks\n  }, [filteredTools, setToolValue, type])\n\n  if (!filteredTools.length) {\n    return <SearchNotFound message={t(`info.message.empty${type}List`)} />\n  }\n\n  return (\n    <List\n      className=\"long-list\"\n      disablePadding\n      data-testid={`${typeKey}-list`}\n      sx={{ px: 1.5, pb: 2 }}\n    >\n      {filteredTools.map((tool) => (\n        <ToolItem\n          key={tool.key}\n          tool={tool}\n          typeKey={typeKey}\n          isEnabled={enabledTools[tool.key]}\n          onToggle={toggleCallbacks[tool.key]}\n        />\n      ))}\n    </List>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAa,SAAS,EAAE,eAAe,WAAoC;CACzE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,eAAe,kBAAkB,UAAU,MAAM,WAAW,OAAO;CACzE,MAAM,EAAE,iBAAiB,mBAAmB;CAG5C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,gBAAgB,UAAU;CAC1B,MAAM,kBAAkB,cAAc;EACpC,MAAM,YAAwC,CAAC;EAC/C,cAAc,SAAS,SAAS;GAC9B,UAAU,KAAK,aAAa;IAE1B,aAAa,MAAM,KAAK,KAAK,CAAC,gBAAgB,QAAQ,KAAK,IAAI;GACjE;EACF,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAe;EAAc;CAAI,CAAC;CAEtC,IAAI,CAAC,cAAc,QACjB,OAAO,oBAAC,gBAAD,EAAgB,SAAS,EAAE,qBAAqB,KAAK,KAAK,EAAI,CAAA;CAGvE,OACE,oBAAC,MAAD;EACE,WAAU;EACV,gBAAA;EACA,eAAa,GAAG,QAAQ;EACxB,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;EAEpB,UAAA,cAAc,KAAK,SAClB,oBAAC,UAAD;GAEQ;GACG;GACT,WAAW,aAAa,KAAK;GAC7B,UAAU,gBAAgB,KAAK;EAChC,GALM,KAAK,GAKX,CACF;CACG,CAAA;AAEV"}

package/dist/esm/components/TransactionCard/ActiveTransactionCard.js

@@ -1,4 +1,5 @@
 import { Card as Card$1 } from "../Card/Card.js";
+import "../../stores/routes/types.js";
 import { CircularProgressPending } from "../Timer/StepStatusTimer.style.js";
 import { useActionMessage } from "../../hooks/useActionMessage.js";
 import { getExpiryTimestamp } from "../../utils/timer.js";

package/dist/esm/components/TransactionCard/ActiveTransactionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport { Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { getExpiryTimestamp } from '../../utils/timer.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { ExecutionTimerText } from '../Timer/ExecutionTimerText.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport { DeleteButton, PendingCircle } from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n  route: RouteExtended\n  status?: RouteExecutionStatus\n  onClick: () => void\n  onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n  route,\n  status,\n  onClick,\n  onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n  const { t } = useTranslation()\n\n  const lastActiveStep = route.steps.findLast((step) => step.execution)\n  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n  const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n  const isFailed = status === RouteExecutionStatus.Failed\n\n  const statusIcon = (() => {\n    if (isFailed) {\n      return <IconCircle status=\"error\" size={24} />\n    }\n    if (\n      ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n        lastActiveAction?.status ?? ''\n      )\n    ) {\n      return <IconCircle status=\"info\" size={24} />\n    }\n    return (\n      <PendingCircle>\n        <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n      </PendingCircle>\n    )\n  })()\n\n  return (\n    <Card onClick={onClick} indented>\n      <ActionRow\n        sx={{ mb: 1.5 }}\n        startAdornment={statusIcon}\n        message={title ?? ''}\n        endAdornment={\n          isFailed ? (\n            <Tooltip title={t('button.clearTransaction')}>\n              <DeleteButton size=\"small\" onClick={onDelete}>\n                <DeleteOutline sx={{ fontSize: 16 }} />\n              </DeleteButton>\n            </Tooltip>\n          ) : lastActiveStep?.execution?.signedAt ? (\n            <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n              <ExecutionTimerText\n                expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n              />\n            </Typography>\n          ) : undefined\n        }\n      />\n      <RouteTokens route={route} />\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,SAAS;CACpE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,EAAE;CAClE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,gBAAgB;CAEnE,MAAM,WAAW,WAAA;CAoBjB,OACE,qBAACA,QAAD;EAAe;EAAS,UAAA;YAAxB,CACE,oBAAC,WAAD;GACE,IAAI,EAAE,IAAI,IAAI;GACd,uBAtBoB;IACxB,IAAI,UACF,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAQ,MAAM;IAAK,CAAA;IAE/C,IACE;KAAC;KAAmB;KAAoB;IAAgB,CAAC,CAAC,SACxD,kBAAkB,UAAU,EAC9B,GAEA,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAO,MAAM;IAAK,CAAA;IAE9C,OACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;KAAyB,MAAM;KAAI,IAAI;MAAE,KAAK;MAAI,MAAM;KAAG;IAAI,CAAA,EAClD,CAAA;GAEnB,EAAA,CAM+B;GACzB,SAAS,SAAS;GAClB,cACE,WACE,oBAAC,SAAD;IAAS,OAAO,EAAE,yBAAyB;cACzC,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;eAClC,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;IAC1B,CAAA;GACP,CAAA,IACP,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;IAAI;cAC9C,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,cAAc,EACnD,CAAA;GACS,CAAA,IACV,KAAA;EAEP,CAAA,GACD,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACxB;;AAEV"}
+{"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport { Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { getExpiryTimestamp } from '../../utils/timer.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { ExecutionTimerText } from '../Timer/ExecutionTimerText.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport { DeleteButton, PendingCircle } from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n  route: RouteExtended\n  status?: RouteExecutionStatus\n  onClick: () => void\n  onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n  route,\n  status,\n  onClick,\n  onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n  const { t } = useTranslation()\n\n  const lastActiveStep = route.steps.findLast((step) => step.execution)\n  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n  const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n  const isFailed = status === RouteExecutionStatus.Failed\n\n  const statusIcon = (() => {\n    if (isFailed) {\n      return <IconCircle status=\"error\" size={24} />\n    }\n    if (\n      ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n        lastActiveAction?.status ?? ''\n      )\n    ) {\n      return <IconCircle status=\"info\" size={24} />\n    }\n    return (\n      <PendingCircle>\n        <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n      </PendingCircle>\n    )\n  })()\n\n  return (\n    <Card onClick={onClick} indented>\n      <ActionRow\n        sx={{ mb: 1.5 }}\n        startAdornment={statusIcon}\n        message={title ?? ''}\n        endAdornment={\n          isFailed ? (\n            <Tooltip title={t('button.clearTransaction')}>\n              <DeleteButton size=\"small\" onClick={onDelete}>\n                <DeleteOutline sx={{ fontSize: 16 }} />\n              </DeleteButton>\n            </Tooltip>\n          ) : lastActiveStep?.execution?.signedAt ? (\n            <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n              <ExecutionTimerText\n                expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n              />\n            </Typography>\n          ) : undefined\n        }\n      />\n      <RouteTokens route={route} />\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,SAAS;CACpE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,EAAE;CAClE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,gBAAgB;CAEnE,MAAM,WAAW,WAAA;CAoBjB,OACE,qBAACA,QAAD;EAAe;EAAS,UAAA;EAAxB,UAAA,CACE,oBAAC,WAAD;GACE,IAAI,EAAE,IAAI,IAAI;GACd,uBAtBoB;IACxB,IAAI,UACF,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAQ,MAAM;IAAK,CAAA;IAE/C,IACE;KAAC;KAAmB;KAAoB;IAAgB,CAAC,CAAC,SACxD,kBAAkB,UAAU,EAC9B,GAEA,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAO,MAAM;IAAK,CAAA;IAE9C,OACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;KAAyB,MAAM;KAAI,IAAI;MAAE,KAAK;MAAI,MAAM;KAAG;IAAI,CAAA,EAClD,CAAA;GAEnB,EAAA,CAM+B;GACzB,SAAS,SAAS;GAClB,cACE,WACE,oBAAC,SAAD;IAAS,OAAO,EAAE,yBAAyB;IACzC,UAAA,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;KAClC,UAAA,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;IAC1B,CAAA;GACP,CAAA,IACP,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;IAAI;IAC9C,UAAA,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,cAAc,EACnD,CAAA;GACS,CAAA,IACV,KAAA;EAEP,CAAA,GACD,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACxB;;AAEV"}

package/dist/esm/components/TransactionCard/ActiveTransactionCard.style.js

@@ -15,6 +15,15 @@ const DeleteButton = styled(IconButton)(({ theme }) => ({
 	width: 24,
 	height: 24
 }));
+styled(IconButton)(({ theme }) => ({
+	fontWeight: 700,
+	fontSize: 12,
+	height: 24,
+	borderRadius: theme.vars.shape.borderRadius,
+	padding: theme.spacing(.5, 1.5),
+	color: theme.vars.palette.text.primary,
+	backgroundColor: theme.vars.palette.background.paper
+}));
 //#endregion
 export { DeleteButton, PendingCircle };
 

package/dist/esm/components/TransactionCard/ActiveTransactionCard.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveTransactionCard.style.js","names":[],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.style.tsx"],"sourcesContent":["import { Box, IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const PendingCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  position: 'relative',\n  width: 24,\n  height: 24,\n  flexShrink: 0,\n  borderRadius: '50%',\n  border: `2px solid ${theme.vars.palette.grey[300]}`,\n  ...theme.applyStyles('dark', {\n    borderColor: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =\n  styled(IconButton)(({ theme }) => ({\n    padding: theme.spacing(0.5),\n    backgroundColor: theme.vars.palette.background.paper,\n    width: 24,\n    height: 24,\n  }))\n"],"mappings":";;AAGA,MAAa,gBAA4D,OACvE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,cAAc;CACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;CAC7C,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;AACH,EAAE;AAEF,MAAa,eACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,SAAS,MAAM,QAAQ,EAAG;CAC1B,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,OAAO;CACP,QAAQ;AACV,EAAE"}
+{"version":3,"file":"ActiveTransactionCard.style.js","names":[],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.style.tsx"],"sourcesContent":["import { Box, IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const PendingCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  position: 'relative',\n  width: 24,\n  height: 24,\n  flexShrink: 0,\n  borderRadius: '50%',\n  border: `2px solid ${theme.vars.palette.grey[300]}`,\n  ...theme.applyStyles('dark', {\n    borderColor: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =\n  styled(IconButton)(({ theme }) => ({\n    padding: theme.spacing(0.5),\n    backgroundColor: theme.vars.palette.background.paper,\n    width: 24,\n    height: 24,\n  }))\n\nexport const RetryButton: React.FC<React.ComponentProps<typeof IconButton>> =\n  styled(IconButton)(({ theme }) => ({\n    fontWeight: 700,\n    fontSize: 12,\n    height: 24,\n    borderRadius: theme.vars.shape.borderRadius,\n    padding: theme.spacing(0.5, 1.5),\n    color: theme.vars.palette.text.primary,\n    backgroundColor: theme.vars.palette.background.paper,\n  }))\n"],"mappings":";;AAGA,MAAa,gBAA4D,OACvE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,cAAc;CACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;CAC7C,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;AACH,EAAE;AAEF,MAAa,eACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,SAAS,MAAM,QAAQ,EAAG;CAC1B,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,OAAO;CACP,QAAQ;AACV,EAAE;AAGF,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,IAAK,GAAG;CAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB,MAAM,KAAK,QAAQ,WAAW;AACjD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/TransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../Card/Card.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { DateLabelContainer, DateLabelText } from './TransactionCard.style.js'\n\ninterface TransactionCardProps {\n  route: RouteExtended\n  date: Date\n  onClick?: () => void\n}\n\nexport const TransactionCard = ({\n  route,\n  date,\n  onClick,\n}: TransactionCardProps): JSX.Element => {\n  const { i18n } = useTranslation()\n\n  return (\n    <Card indented onClick={onClick}>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n        <DateLabelContainer>\n          <DateLabelText color=\"text.secondary\">\n            {date.toLocaleString(i18n.language, { dateStyle: 'long' })}\n          </DateLabelText>\n          <DateLabelText color=\"text.secondary\">\n            {date.toLocaleString(i18n.language, { timeStyle: 'short' })}\n          </DateLabelText>\n        </DateLabelContainer>\n        <RouteTokens route={route} />\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;AAcA,MAAa,mBAAmB,EAC9B,OACA,MACA,cACuC;CACvC,MAAM,EAAE,SAAS,eAAe;CAEhC,OACE,oBAACA,QAAD;EAAM,UAAA;EAAkB;YACtB,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAI;aAA9D,CACE,qBAAC,oBAAD,EAAA,UAAA,CACE,oBAAC,eAAD;IAAe,OAAM;cAClB,KAAK,eAAe,KAAK,UAAU,EAAE,WAAW,OAAO,CAAC;GAC5C,CAAA,GACf,oBAAC,eAAD;IAAe,OAAM;cAClB,KAAK,eAAe,KAAK,UAAU,EAAE,WAAW,QAAQ,CAAC;GAC7C,CAAA,CACG,EAAA,CAAA,GACpB,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACzB;;CACD,CAAA;AAEV"}
+{"version":3,"file":"TransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/TransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Card } from '../Card/Card.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { DateLabelContainer, DateLabelText } from './TransactionCard.style.js'\n\ninterface TransactionCardProps {\n  route: RouteExtended\n  date: Date\n  onClick?: () => void\n}\n\nexport const TransactionCard = ({\n  route,\n  date,\n  onClick,\n}: TransactionCardProps): JSX.Element => {\n  const { i18n } = useTranslation()\n\n  return (\n    <Card indented onClick={onClick}>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n        <DateLabelContainer>\n          <DateLabelText color=\"text.secondary\">\n            {date.toLocaleString(i18n.language, { dateStyle: 'long' })}\n          </DateLabelText>\n          <DateLabelText color=\"text.secondary\">\n            {date.toLocaleString(i18n.language, { timeStyle: 'short' })}\n          </DateLabelText>\n        </DateLabelContainer>\n        <RouteTokens route={route} />\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;AAcA,MAAa,mBAAmB,EAC9B,OACA,MACA,cACuC;CACvC,MAAM,EAAE,SAAS,eAAe;CAEhC,OACE,oBAACA,QAAD;EAAM,UAAA;EAAkB;EACtB,UAAA,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAI;GAA9D,UAAA,CACE,qBAAC,oBAAD,EAAA,UAAA,CACE,oBAAC,eAAD;IAAe,OAAM;IAClB,UAAA,KAAK,eAAe,KAAK,UAAU,EAAE,WAAW,OAAO,CAAC;GAC5C,CAAA,GACf,oBAAC,eAAD;IAAe,OAAM;IAClB,UAAA,KAAK,eAAe,KAAK,UAAU,EAAE,WAAW,QAAQ,CAAC;GAC7C,CAAA,CACG,EAAA,CAAA,GACpB,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACzB;;CACD,CAAA;AAEV"}

package/dist/esm/components/TransactionCard/TransactionCard.style.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+//#region src/components/TransactionCard/TransactionCard.style.d.ts
+declare const DateLabelContainer: React.FC<React.ComponentProps<typeof Box>>;
+declare const DateLabelText: React.FC<React.ComponentProps<typeof Typography>>;
+//#endregion
+export { DateLabelContainer, DateLabelText };
+//# sourceMappingURL=TransactionCard.style.d.ts.map

package/dist/esm/components/TransactionCard/TransactionCard.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionCard.style.d.ts","names":[],"sources":["../../../../src/components/TransactionCard/TransactionCard.style.tsx"],"mappings":";;;cAGa,oBAAoB,MAAM,GAAG,MAAM,sBAAsB;cAMzD,eAAe,MAAM,GAAG,MAAM,sBAAsB"}

package/dist/esm/components/TransactionCard/TransactionCardSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionCardSkeleton.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/TransactionCardSkeleton.tsx"],"sourcesContent":["import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box, Skeleton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { Card } from '../Card/Card.js'\nimport { TokenSkeleton } from '../Token/Token.js'\n\ninterface TransactionCardSkeletonProps {\n  active?: boolean\n}\n\nexport const TransactionCardSkeleton = ({\n  active,\n}: TransactionCardSkeletonProps): JSX.Element => {\n  return (\n    <Card indented>\n      {active ? (\n        <Skeleton\n          variant=\"rectangular\"\n          height={40}\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusTertiary,\n            mb: 1.5,\n          })}\n        />\n      ) : (\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            pb: 1.5,\n          }}\n        >\n          <Skeleton\n            variant=\"rectangular\"\n            width={96}\n            height={18}\n            sx={(theme) => ({\n              borderRadius: theme.vars.shape.borderRadius,\n            })}\n          />\n          <Skeleton\n            variant=\"rectangular\"\n            width={64}\n            height={18}\n            sx={(theme) => ({\n              borderRadius: theme.vars.shape.borderRadius,\n            })}\n          />\n        </Box>\n      )}\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n        <TokenSkeleton />\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, color: 'text.secondary' }} />\n        </Box>\n        <TokenSkeleton />\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;AAUA,MAAa,2BAA2B,EACtC,aAC+C;CAC/C,OACE,qBAACA,QAAD;EAAM,UAAA;YAAN,CACG,SACC,oBAAC,UAAD;GACE,SAAQ;GACR,QAAQ;GACR,KAAK,WAAW;IACd,cAAc,MAAM,KAAK,MAAM;IAC/B,IAAI;GACN;EACD,CAAA,IAED,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,gBAAgB;IAChB,IAAI;GACN;aALF,CAOE,oBAAC,UAAD;IACE,SAAQ;IACR,OAAO;IACP,QAAQ;IACR,KAAK,WAAW,EACd,cAAc,MAAM,KAAK,MAAM,aACjC;GACD,CAAA,GACD,oBAAC,UAAD;IACE,SAAQ;IACR,OAAO;IACP,QAAQ;IACR,KAAK,WAAW,EACd,cAAc,MAAM,KAAK,MAAM,aACjC;GACD,CAAA,CACE;MAEP,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAI;aAA9D;IACE,oBAAC,eAAD,CAAgB,CAAA;IAChB,oBAAC,KAAD;KACE,IAAI;MACF,OAAO;MACP,QAAQ;MACR,SAAS;MACT,YAAY;MACZ,gBAAgB;KAClB;eAEA,oBAAC,mBAAD,EAAmB,IAAI;MAAE,UAAU;MAAI,OAAO;KAAiB,EAAI,CAAA;IAChE,CAAA;IACL,oBAAC,eAAD,CAAgB,CAAA;GACb;IACD;;AAEV"}
+{"version":3,"file":"TransactionCardSkeleton.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/TransactionCardSkeleton.tsx"],"sourcesContent":["import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box, Skeleton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { Card } from '../Card/Card.js'\nimport { TokenSkeleton } from '../Token/Token.js'\n\ninterface TransactionCardSkeletonProps {\n  active?: boolean\n}\n\nexport const TransactionCardSkeleton = ({\n  active,\n}: TransactionCardSkeletonProps): JSX.Element => {\n  return (\n    <Card indented>\n      {active ? (\n        <Skeleton\n          variant=\"rectangular\"\n          height={40}\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusTertiary,\n            mb: 1.5,\n          })}\n        />\n      ) : (\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            pb: 1.5,\n          }}\n        >\n          <Skeleton\n            variant=\"rectangular\"\n            width={96}\n            height={18}\n            sx={(theme) => ({\n              borderRadius: theme.vars.shape.borderRadius,\n            })}\n          />\n          <Skeleton\n            variant=\"rectangular\"\n            width={64}\n            height={18}\n            sx={(theme) => ({\n              borderRadius: theme.vars.shape.borderRadius,\n            })}\n          />\n        </Box>\n      )}\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n        <TokenSkeleton />\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, color: 'text.secondary' }} />\n        </Box>\n        <TokenSkeleton />\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;AAUA,MAAa,2BAA2B,EACtC,aAC+C;CAC/C,OACE,qBAACA,QAAD;EAAM,UAAA;EAAN,UAAA,CACG,SACC,oBAAC,UAAD;GACE,SAAQ;GACR,QAAQ;GACR,KAAK,WAAW;IACd,cAAc,MAAM,KAAK,MAAM;IAC/B,IAAI;GACN;EACD,CAAA,IAED,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,gBAAgB;IAChB,IAAI;GACN;GALF,UAAA,CAOE,oBAAC,UAAD;IACE,SAAQ;IACR,OAAO;IACP,QAAQ;IACR,KAAK,WAAW,EACd,cAAc,MAAM,KAAK,MAAM,aACjC;GACD,CAAA,GACD,oBAAC,UAAD;IACE,SAAQ;IACR,OAAO;IACP,QAAQ;IACR,KAAK,WAAW,EACd,cAAc,MAAM,KAAK,MAAM,aACjC;GACD,CAAA,CACE;EAEP,CAAA,GAAA,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAI;GAA9D,UAAA;IACE,oBAAC,eAAD,CAAgB,CAAA;IAChB,oBAAC,KAAD;KACE,IAAI;MACF,OAAO;MACP,QAAQ;MACR,SAAS;MACT,YAAY;MACZ,gBAAgB;KAClB;KAEA,UAAA,oBAAC,mBAAD,EAAmB,IAAI;MAAE,UAAU;MAAI,OAAO;KAAiB,EAAI,CAAA;IAChE,CAAA;IACL,oBAAC,eAAD,CAAgB,CAAA;GACb;EACD,CAAA,CAAA;;AAEV"}

package/dist/esm/config/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","names":[],"sources":["../../../src/config/constants.ts"],"mappings":";cAAa,gBAAA"}
+{"version":3,"file":"constants.d.ts","names":[],"sources":["../../../src/config/constants.ts"],"mappings":";cAAa"}

package/dist/esm/config/version.d.ts

@@ -1,6 +1,6 @@
 //#region src/config/version.d.ts
 declare const name = "@lifi/widget";
-declare const version = "4.3.1";
+declare const version = "4.5.0";
 //#endregion
 export { name, version };
 //# sourceMappingURL=version.d.ts.map

package/dist/esm/config/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","names":[],"sources":["../../../src/config/version.ts"],"mappings":";cAAa,IAAA;AAAA,cACA,OAAA"}
+{"version":3,"file":"version.d.ts","names":[],"sources":["../../../src/config/version.ts"],"mappings":";cAAa;cACA"}

package/dist/esm/config/version.js

@@ -1,6 +1,6 @@
 //#region src/config/version.ts
 const name = "@lifi/widget";
-const version = "4.3.1";
+const version = "4.5.0";
 //#endregion
 export { name, version };
 

package/dist/esm/config/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.3.1'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}
+{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.5.0'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}

package/dist/esm/hooks/useAccountsBalancesData.js

@@ -1,17 +1,8 @@
 import { useChains } from "./useChains.js";
-import { useFilteredTokensByBalance } from "./useFilteredByTokenBalances.js";
 import { useMemo } from "react";
 import { useAccount } from "@lifi/wallet-management";
 //#region src/hooks/useAccountsBalancesData.ts
 const useAccountsBalancesData = (selectedChainId, formType, isAllNetworks, allTokens) => {
-	const { data: accountsWithTokens, isLoading: isAccountsLoading } = useAccountsData(selectedChainId, formType, isAllNetworks, allTokens);
-	const { data: filteredTokens, isLoading: isCachedBalancesLoading } = useFilteredTokensByBalance(accountsWithTokens, formType);
-	return {
-		data: filteredTokens,
-		isLoading: isAccountsLoading || isCachedBalancesLoading
-	};
-};
-const useAccountsData = (selectedChainId, formType, isAllNetworks, allTokens) => {
 	const { chains: allChains, isLoading: isChainsLoading, getChainById } = useChains(formType);
 	const currentChain = useMemo(() => {
 		return selectedChainId ? getChainById(selectedChainId, allChains) : void 0;
@@ -43,15 +34,11 @@ const useAccountsData = (selectedChainId, formType, isAllNetworks, allTokens) =>
 					const accountChains = chains?.filter((chain) => account.chainType === chain?.chainType);
 					if (accountChains) {
 						const chainIdSet = new Set(accountChains.map((chain) => chain.id));
-						const filteredTokens = Object.entries(allTokens).reduce((tokenAcc, [chainIdStr, tokens]) => {
+						acc[account.address] = Object.entries(allTokens).reduce((tokenAcc, [chainIdStr, tokens]) => {
 							const chainId = Number(chainIdStr);
 							if (chainIdSet.has(chainId)) tokenAcc[chainId] = tokens;
 							return tokenAcc;
 						}, {});
-						acc[account.address] = {
-							chainType: account.chainType,
-							tokens: filteredTokens
-						};
 					}
 				}
 				return acc;

package/dist/esm/hooks/useAccountsBalancesData.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAccountsBalancesData.js","names":[],"sources":["../../../src/hooks/useAccountsBalancesData.ts"],"sourcesContent":["import type { ChainType, TokenExtended } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { useMemo } from 'react'\nimport type { FormType } from '../stores/form/types.js'\nimport { useChains } from './useChains.js'\nimport { useFilteredTokensByBalance } from './useFilteredByTokenBalances.js'\n\nexport const useAccountsBalancesData = (\n  selectedChainId?: number,\n  formType?: FormType,\n  isAllNetworks?: boolean,\n  allTokens?: Record<number, TokenExtended[]>\n): {\n  data: Record<string, Record<number, TokenExtended[]>> | undefined\n  isLoading: boolean\n} => {\n  const { data: accountsWithTokens, isLoading: isAccountsLoading } =\n    useAccountsData(selectedChainId, formType, isAllNetworks, allTokens)\n\n  // Filter out EVM tokens that do not have balances\n  const { data: filteredTokens, isLoading: isCachedBalancesLoading } =\n    useFilteredTokensByBalance(accountsWithTokens, formType)\n\n  return {\n    data: filteredTokens,\n    isLoading: isAccountsLoading || isCachedBalancesLoading,\n  }\n}\n\nconst useAccountsData = (\n  selectedChainId?: number,\n  formType?: FormType,\n  isAllNetworks?: boolean,\n  allTokens?: Record<number, TokenExtended[]>\n) => {\n  const {\n    chains: allChains,\n    isLoading: isChainsLoading,\n    getChainById,\n  } = useChains(formType)\n  const currentChain = useMemo(() => {\n    return selectedChainId\n      ? getChainById(selectedChainId, allChains)\n      : undefined\n  }, [selectedChainId, allChains, getChainById])\n  const chains = useMemo(() => {\n    return isAllNetworks ? allChains : currentChain ? [currentChain] : undefined\n  }, [allChains, isAllNetworks, currentChain])\n\n  const { accounts: allAccounts, account: currentAccount } = useAccount(\n    isAllNetworks ? undefined : { chainType: currentChain?.chainType }\n  )\n  const accounts = useMemo(() => {\n    return isAllNetworks\n      ? allAccounts\n      : currentAccount\n        ? [currentAccount]\n        : undefined\n  }, [allAccounts, currentAccount, isAllNetworks])\n\n  const accountsWithTokens = useMemo(() => {\n    if (!chains || !allTokens || !accounts?.length) {\n      return undefined\n    }\n    return accounts\n      ?.filter((account) => account.address)\n      .reduce(\n        (acc, account) => {\n          if (account.address) {\n            const accountChains = chains?.filter(\n              (chain) => account.chainType === chain?.chainType\n            )\n            if (accountChains) {\n              const chainIdSet = new Set(accountChains.map((chain) => chain.id))\n              const filteredTokens = Object.entries(allTokens).reduce(\n                (tokenAcc, [chainIdStr, tokens]) => {\n                  const chainId = Number(chainIdStr)\n                  if (chainIdSet.has(chainId)) {\n                    tokenAcc[chainId] = tokens\n                  }\n                  return tokenAcc\n                },\n                {} as { [chainId: number]: TokenExtended[] }\n              )\n              acc[account.address] = {\n                chainType: account.chainType,\n                tokens: filteredTokens,\n              }\n            }\n          }\n          return acc\n        },\n        {} as Record<\n          string,\n          { chainType: ChainType; tokens: Record<number, TokenExtended[]> }\n        >\n      )\n  }, [accounts, chains, allTokens])\n\n  return {\n    data: accountsWithTokens,\n    isLoading: isChainsLoading,\n  }\n}\n"],"mappings":";;;;;AAOA,MAAa,2BACX,iBACA,UACA,eACA,cAIG;CACH,MAAM,EAAE,MAAM,oBAAoB,WAAW,sBAC3C,gBAAgB,iBAAiB,UAAU,eAAe,SAAS;CAGrE,MAAM,EAAE,MAAM,gBAAgB,WAAW,4BACvC,2BAA2B,oBAAoB,QAAQ;CAEzD,OAAO;EACL,MAAM;EACN,WAAW,qBAAqB;CAClC;AACF;AAEA,MAAM,mBACJ,iBACA,UACA,eACA,cACG;CACH,MAAM,EACJ,QAAQ,WACR,WAAW,iBACX,iBACE,UAAU,QAAQ;CACtB,MAAM,eAAe,cAAc;EACjC,OAAO,kBACH,aAAa,iBAAiB,SAAS,IACvC,KAAA;CACN,GAAG;EAAC;EAAiB;EAAW;CAAY,CAAC;CAC7C,MAAM,SAAS,cAAc;EAC3B,OAAO,gBAAgB,YAAY,eAAe,CAAC,YAAY,IAAI,KAAA;CACrE,GAAG;EAAC;EAAW;EAAe;CAAY,CAAC;CAE3C,MAAM,EAAE,UAAU,aAAa,SAAS,mBAAmB,WACzD,gBAAgB,KAAA,IAAY,EAAE,WAAW,cAAc,UAAU,CACnE;CACA,MAAM,WAAW,cAAc;EAC7B,OAAO,gBACH,cACA,iBACE,CAAC,cAAc,IACf,KAAA;CACR,GAAG;EAAC;EAAa;EAAgB;CAAa,CAAC;CAyC/C,OAAO;EACL,MAxCyB,cAAc;GACvC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,QACtC;GAEF,OAAO,UACH,QAAQ,YAAY,QAAQ,OAAO,CAAC,CACrC,QACE,KAAK,YAAY;IAChB,IAAI,QAAQ,SAAS;KACnB,MAAM,gBAAgB,QAAQ,QAC3B,UAAU,QAAQ,cAAc,OAAO,SAC1C;KACA,IAAI,eAAe;MACjB,MAAM,aAAa,IAAI,IAAI,cAAc,KAAK,UAAU,MAAM,EAAE,CAAC;MACjE,MAAM,iBAAiB,OAAO,QAAQ,SAAS,CAAC,CAAC,QAC9C,UAAU,CAAC,YAAY,YAAY;OAClC,MAAM,UAAU,OAAO,UAAU;OACjC,IAAI,WAAW,IAAI,OAAO,GACxB,SAAS,WAAW;OAEtB,OAAO;MACT,GACA,CAAC,CACH;MACA,IAAI,QAAQ,WAAW;OACrB,WAAW,QAAQ;OACnB,QAAQ;MACV;KACF;IACF;IACA,OAAO;GACT,GACA,CAAC,CAIH;EACJ,GAAG;GAAC;GAAU;GAAQ;EAAS,CAGN;EACvB,WAAW;CACb;AACF"}
+{"version":3,"file":"useAccountsBalancesData.js","names":[],"sources":["../../../src/hooks/useAccountsBalancesData.ts"],"sourcesContent":["import type { TokenExtended } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { useMemo } from 'react'\nimport type { FormType } from '../stores/form/types.js'\nimport { useChains } from './useChains.js'\n\nexport const useAccountsBalancesData = (\n  selectedChainId?: number,\n  formType?: FormType,\n  isAllNetworks?: boolean,\n  allTokens?: Record<number, TokenExtended[]>\n): {\n  data: Record<string, Record<number, TokenExtended[]>> | undefined\n  isLoading: boolean\n} => {\n  const {\n    chains: allChains,\n    isLoading: isChainsLoading,\n    getChainById,\n  } = useChains(formType)\n  const currentChain = useMemo(() => {\n    return selectedChainId\n      ? getChainById(selectedChainId, allChains)\n      : undefined\n  }, [selectedChainId, allChains, getChainById])\n  const chains = useMemo(() => {\n    return isAllNetworks ? allChains : currentChain ? [currentChain] : undefined\n  }, [allChains, isAllNetworks, currentChain])\n\n  const { accounts: allAccounts, account: currentAccount } = useAccount(\n    isAllNetworks ? undefined : { chainType: currentChain?.chainType }\n  )\n  const accounts = useMemo(() => {\n    return isAllNetworks\n      ? allAccounts\n      : currentAccount\n        ? [currentAccount]\n        : undefined\n  }, [allAccounts, currentAccount, isAllNetworks])\n\n  const accountsWithTokens = useMemo(() => {\n    if (!chains || !allTokens || !accounts?.length) {\n      return undefined\n    }\n    return accounts\n      ?.filter((account) => account.address)\n      .reduce(\n        (acc, account) => {\n          if (account.address) {\n            const accountChains = chains?.filter(\n              (chain) => account.chainType === chain?.chainType\n            )\n            if (accountChains) {\n              const chainIdSet = new Set(accountChains.map((chain) => chain.id))\n              acc[account.address] = Object.entries(allTokens).reduce(\n                (tokenAcc, [chainIdStr, tokens]) => {\n                  const chainId = Number(chainIdStr)\n                  if (chainIdSet.has(chainId)) {\n                    tokenAcc[chainId] = tokens\n                  }\n                  return tokenAcc\n                },\n                {} as Record<number, TokenExtended[]>\n              )\n            }\n          }\n          return acc\n        },\n        {} as Record<string, Record<number, TokenExtended[]>>\n      )\n  }, [accounts, chains, allTokens])\n\n  return {\n    data: accountsWithTokens,\n    isLoading: isChainsLoading,\n  }\n}\n"],"mappings":";;;;AAMA,MAAa,2BACX,iBACA,UACA,eACA,cAIG;CACH,MAAM,EACJ,QAAQ,WACR,WAAW,iBACX,iBACE,UAAU,QAAQ;CACtB,MAAM,eAAe,cAAc;EACjC,OAAO,kBACH,aAAa,iBAAiB,SAAS,IACvC,KAAA;CACN,GAAG;EAAC;EAAiB;EAAW;CAAY,CAAC;CAC7C,MAAM,SAAS,cAAc;EAC3B,OAAO,gBAAgB,YAAY,eAAe,CAAC,YAAY,IAAI,KAAA;CACrE,GAAG;EAAC;EAAW;EAAe;CAAY,CAAC;CAE3C,MAAM,EAAE,UAAU,aAAa,SAAS,mBAAmB,WACzD,gBAAgB,KAAA,IAAY,EAAE,WAAW,cAAc,UAAU,CACnE;CACA,MAAM,WAAW,cAAc;EAC7B,OAAO,gBACH,cACA,iBACE,CAAC,cAAc,IACf,KAAA;CACR,GAAG;EAAC;EAAa;EAAgB;CAAa,CAAC;CAkC/C,OAAO;EACL,MAjCyB,cAAc;GACvC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,QACtC;GAEF,OAAO,UACH,QAAQ,YAAY,QAAQ,OAAO,CAAC,CACrC,QACE,KAAK,YAAY;IAChB,IAAI,QAAQ,SAAS;KACnB,MAAM,gBAAgB,QAAQ,QAC3B,UAAU,QAAQ,cAAc,OAAO,SAC1C;KACA,IAAI,eAAe;MACjB,MAAM,aAAa,IAAI,IAAI,cAAc,KAAK,UAAU,MAAM,EAAE,CAAC;MACjE,IAAI,QAAQ,WAAW,OAAO,QAAQ,SAAS,CAAC,CAAC,QAC9C,UAAU,CAAC,YAAY,YAAY;OAClC,MAAM,UAAU,OAAO,UAAU;OACjC,IAAI,WAAW,IAAI,OAAO,GACxB,SAAS,WAAW;OAEtB,OAAO;MACT,GACA,CAAC,CACH;KACF;IACF;IACA,OAAO;GACT,GACA,CAAC,CACH;EACJ,GAAG;GAAC;GAAU;GAAQ;EAAS,CAGN;EACvB,WAAW;CACb;AACF"}

package/dist/esm/hooks/useAddressActivity.d.ts

@@ -0,0 +1,11 @@
+//#region src/hooks/useAddressActivity.d.ts
+interface AddressActivity {
+  hasActivity: boolean;
+  isLoading: boolean;
+  isFetched: boolean;
+  toAddress: string | undefined;
+}
+declare const useAddressActivity: (chainId?: number) => AddressActivity;
+//#endregion
+export { useAddressActivity };
+//# sourceMappingURL=useAddressActivity.d.ts.map

package/dist/esm/hooks/useAddressActivity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAddressActivity.d.ts","names":[],"sources":["../../../src/hooks/useAddressActivity.ts"],"mappings":";UAMU;EACR;EACA;EACA;EACA;;cAEW,qBAAsB,qBAAmB"}

package/dist/esm/hooks/useAddressValidation.d.ts

@@ -0,0 +1,28 @@
+import { Chain, ChainType } from "@lifi/sdk";
+//#region src/hooks/useAddressValidation.d.ts
+declare enum AddressType {
+  Address = 0,
+  NameService = 1
+}
+type ValidationArgs = {
+  value: string;
+  chainType?: ChainType;
+  chain?: Chain;
+};
+type ValidResponse = {
+  address: string;
+  addressType: AddressType;
+  chainType: ChainType;
+  isValid: true;
+};
+type InvalidResponse = {
+  error: string;
+  isValid: false;
+};
+declare const useAddressValidation: () => {
+  validateAddress: (args: ValidationArgs) => Promise<ValidResponse | InvalidResponse>;
+  isValidating: boolean;
+};
+//#endregion
+export { AddressType, useAddressValidation };
+//# sourceMappingURL=useAddressValidation.d.ts.map

package/dist/esm/hooks/useAddressValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAddressValidation.d.ts","names":[],"sources":["../../../src/hooks/useAddressValidation.ts"],"mappings":";;aAOY;EACV;EACA;;KAGG;EACH;EACA,YAAY;EACZ,QAAQ;;KAGL;EACH;EACA,aAAa;EACb,WAAW;EACX;;KAGG;EACH;EACA;;cAGW;EACX,kBACE,MAAM,mBACH,QAAQ,gBAAgB;EAC7B"}

package/dist/esm/hooks/useAddressValidation.js

@@ -4,6 +4,11 @@ import { useTranslation } from "react-i18next";
 import { useMutation } from "@tanstack/react-query";
 import { useChainTypeFromAddress } from "@lifi/widget-provider";
 //#region src/hooks/useAddressValidation.ts
+let AddressType = /* @__PURE__ */ function(AddressType) {
+	AddressType[AddressType["Address"] = 0] = "Address";
+	AddressType[AddressType["NameService"] = 1] = "NameService";
+	return AddressType;
+}({});
 const useAddressValidation = () => {
 	const { t } = useTranslation();
 	const { getChainTypeFromAddress } = useChainTypeFromAddress();
@@ -45,6 +50,6 @@ const useAddressValidation = () => {
 	};
 };
 //#endregion
-export { useAddressValidation };
+export { AddressType, useAddressValidation };
 
 //# sourceMappingURL=useAddressValidation.js.map

package/dist/esm/hooks/useAddressValidation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAddressValidation.js","names":[],"sources":["../../../src/hooks/useAddressValidation.ts"],"sourcesContent":["import type { Chain, ChainType } from '@lifi/sdk'\nimport { getNameServiceAddress } from '@lifi/sdk'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport { useMutation } from '@tanstack/react-query'\nimport { useTranslation } from 'react-i18next'\nimport { useSDKClient } from '../providers/SDKClientProvider.js'\n\nexport enum AddressType {\n  Address = 0,\n  NameService = 1,\n}\n\ntype ValidationArgs = {\n  value: string\n  chainType?: ChainType\n  chain?: Chain\n}\n\ntype ValidResponse = {\n  address: string\n  addressType: AddressType\n  chainType: ChainType\n  isValid: true\n}\n\ntype InvalidResponse = {\n  error: string\n  isValid: false\n}\n\nexport const useAddressValidation = (): {\n  validateAddress: (\n    args: ValidationArgs\n  ) => Promise<ValidResponse | InvalidResponse>\n  isValidating: boolean\n} => {\n  const { t } = useTranslation()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const sdkClient = useSDKClient()\n\n  const { mutateAsync: validateAddress, isPending: isValidating } = useMutation(\n    {\n      mutationFn: async ({\n        value,\n        chainType,\n        chain,\n      }: ValidationArgs): Promise<ValidResponse | InvalidResponse> => {\n        try {\n          if (!value) {\n            throw new Error()\n          }\n\n          const _chainType = getChainTypeFromAddress(value)\n          if (_chainType) {\n            return {\n              address: value,\n              addressType: AddressType.Address,\n              chainType: _chainType,\n              isValid: true,\n            }\n          }\n\n          const address = await getNameServiceAddress(\n            sdkClient,\n            value,\n            chainType\n          )\n\n          if (address) {\n            const _chainType = getChainTypeFromAddress(address)\n            if (_chainType) {\n              return {\n                address: address,\n                addressType: AddressType.NameService,\n                chainType: _chainType,\n                isValid: true,\n              }\n            }\n          }\n\n          throw new Error()\n        } catch (_) {\n          return {\n            isValid: false,\n            error: t(\n              'error.title.walletAddressInvalid',\n              chain?.name\n                ? { context: 'chain', chainName: chain.name }\n                : undefined\n            ),\n          }\n        }\n      },\n    }\n  )\n\n  return {\n    validateAddress,\n    isValidating,\n  }\n}\n"],"mappings":";;;;;;AA8BA,MAAa,6BAKR;CACH,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,4BAA4B,wBAAwB;CAC5D,MAAM,YAAY,aAAa;CAE/B,MAAM,EAAE,aAAa,iBAAiB,WAAW,iBAAiB,YAChE,EACE,YAAY,OAAO,EACjB,OACA,WACA,YAC8D;EAC9D,IAAI;GACF,IAAI,CAAC,OACH,MAAM,IAAI,MAAM;GAGlB,MAAM,aAAa,wBAAwB,KAAK;GAChD,IAAI,YACF,OAAO;IACL,SAAS;IACT,aAAA;IACA,WAAW;IACX,SAAS;GACX;GAGF,MAAM,UAAU,MAAM,sBACpB,WACA,OACA,SACF;GAEA,IAAI,SAAS;IACX,MAAM,aAAa,wBAAwB,OAAO;IAClD,IAAI,YACF,OAAO;KACI;KACT,aAAA;KACA,WAAW;KACX,SAAS;IACX;GAEJ;GAEA,MAAM,IAAI,MAAM;EAClB,SAAS,GAAG;GACV,OAAO;IACL,SAAS;IACT,OAAO,EACL,oCACA,OAAO,OACH;KAAE,SAAS;KAAS,WAAW,MAAM;IAAK,IAC1C,KAAA,CACN;GACF;EACF;CACF,EACF,CACF;CAEA,OAAO;EACL;EACA;CACF;AACF"}
+{"version":3,"file":"useAddressValidation.js","names":[],"sources":["../../../src/hooks/useAddressValidation.ts"],"sourcesContent":["import type { Chain, ChainType } from '@lifi/sdk'\nimport { getNameServiceAddress } from '@lifi/sdk'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport { useMutation } from '@tanstack/react-query'\nimport { useTranslation } from 'react-i18next'\nimport { useSDKClient } from '../providers/SDKClientProvider.js'\n\nexport enum AddressType {\n  Address = 0,\n  NameService = 1,\n}\n\ntype ValidationArgs = {\n  value: string\n  chainType?: ChainType\n  chain?: Chain\n}\n\ntype ValidResponse = {\n  address: string\n  addressType: AddressType\n  chainType: ChainType\n  isValid: true\n}\n\ntype InvalidResponse = {\n  error: string\n  isValid: false\n}\n\nexport const useAddressValidation = (): {\n  validateAddress: (\n    args: ValidationArgs\n  ) => Promise<ValidResponse | InvalidResponse>\n  isValidating: boolean\n} => {\n  const { t } = useTranslation()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const sdkClient = useSDKClient()\n\n  const { mutateAsync: validateAddress, isPending: isValidating } = useMutation(\n    {\n      mutationFn: async ({\n        value,\n        chainType,\n        chain,\n      }: ValidationArgs): Promise<ValidResponse | InvalidResponse> => {\n        try {\n          if (!value) {\n            throw new Error()\n          }\n\n          const _chainType = getChainTypeFromAddress(value)\n          if (_chainType) {\n            return {\n              address: value,\n              addressType: AddressType.Address,\n              chainType: _chainType,\n              isValid: true,\n            }\n          }\n\n          const address = await getNameServiceAddress(\n            sdkClient,\n            value,\n            chainType\n          )\n\n          if (address) {\n            const _chainType = getChainTypeFromAddress(address)\n            if (_chainType) {\n              return {\n                address: address,\n                addressType: AddressType.NameService,\n                chainType: _chainType,\n                isValid: true,\n              }\n            }\n          }\n\n          throw new Error()\n        } catch (_) {\n          return {\n            isValid: false,\n            error: t(\n              'error.title.walletAddressInvalid',\n              chain?.name\n                ? { context: 'chain', chainName: chain.name }\n                : undefined\n            ),\n          }\n        }\n      },\n    }\n  )\n\n  return {\n    validateAddress,\n    isValidating,\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAY,cAAL,yBAAA,aAAA;CACL,YAAA,YAAA,aAAA,KAAA;CACA,YAAA,YAAA,iBAAA,KAAA;;AACF,EAAA,CAAA,CAAA;AAoBA,MAAa,6BAKR;CACH,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,4BAA4B,wBAAwB;CAC5D,MAAM,YAAY,aAAa;CAE/B,MAAM,EAAE,aAAa,iBAAiB,WAAW,iBAAiB,YAChE,EACE,YAAY,OAAO,EACjB,OACA,WACA,YAC8D;EAC9D,IAAI;GACF,IAAI,CAAC,OACH,MAAM,IAAI,MAAM;GAGlB,MAAM,aAAa,wBAAwB,KAAK;GAChD,IAAI,YACF,OAAO;IACL,SAAS;IACT,aAAA;IACA,WAAW;IACX,SAAS;GACX;GAGF,MAAM,UAAU,MAAM,sBACpB,WACA,OACA,SACF;GAEA,IAAI,SAAS;IACX,MAAM,aAAa,wBAAwB,OAAO;IAClD,IAAI,YACF,OAAO;KACI;KACT,aAAA;KACA,WAAW;KACX,SAAS;IACX;GAEJ;GAEA,MAAM,IAAI,MAAM;EAClB,SAAS,GAAG;GACV,OAAO;IACL,SAAS;IACT,OAAO,EACL,oCACA,OAAO,OACH;KAAE,SAAS;KAAS,WAAW,MAAM;IAAK,IAC1C,KAAA,CACN;GACF;EACF;CACF,EACF,CACF;CAEA,OAAO;EACL;EACA;CACF;AACF"}

package/dist/esm/hooks/useAvailableChains.d.ts

@@ -0,0 +1,12 @@
+import { WidgetConfig } from "../types/widget.js";
+import { ChainType, ExtendedChain } from "@lifi/sdk";
+//#region src/hooks/useAvailableChains.d.ts
+type GetChainById = (chainId?: number, chains?: ExtendedChain[]) => ExtendedChain | undefined;
+declare const useAvailableChains: (chainTypes?: ChainType[], widgetConfig?: WidgetConfig) => {
+  chains: ExtendedChain[] | undefined;
+  getChainById: GetChainById;
+  isLoading: boolean;
+};
+//#endregion
+export { useAvailableChains };
+//# sourceMappingURL=useAvailableChains.d.ts.map

package/dist/esm/hooks/useAvailableChains.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvailableChains.d.ts","names":[],"sources":["../../../src/hooks/useAvailableChains.ts"],"mappings":";;;KAUK,gBACH,kBACA,SAAS,oBACN;cAUQ,qBACX,aAAa,aACb,eAAe;EAEf,QAAQ;EACR,cAAc;EACd"}

package/dist/esm/hooks/useChain.d.ts

@@ -0,0 +1,10 @@
+import { ExtendedChain } from "@lifi/sdk";
+//#region src/hooks/useChain.d.ts
+declare const useChain: (chainId?: number) => {
+  chain: ExtendedChain | undefined;
+  isLoading: boolean;
+  getChainById: (chainId?: number, chains?: ExtendedChain[]) => ExtendedChain | undefined;
+};
+//#endregion
+export { useChain };
+//# sourceMappingURL=useChain.d.ts.map

package/dist/esm/hooks/useChain.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChain.d.ts","names":[],"sources":["../../../src/hooks/useChain.ts"],"mappings":";;cAIa,WACX;EAEA,OAAO;EACP;EACA,eACE,kBACA,SAAS,oBACN"}

package/dist/esm/hooks/useContactSupport.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/useContactSupport.d.ts
+declare const useContactSupport: (supportId?: string) => (() => void);
+//#endregion
+export { useContactSupport };
+//# sourceMappingURL=useContactSupport.d.ts.map

package/dist/esm/hooks/useContactSupport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContactSupport.d.ts","names":[],"sources":["../../../src/hooks/useContactSupport.ts"],"mappings":";cAGa,oBAAqB"}

package/dist/esm/hooks/useDebouncedWatch.d.ts

@@ -0,0 +1,6 @@
+import { FormFieldArray, FormFieldNames } from "../stores/form/types.js";
+//#region src/hooks/useDebouncedWatch.d.ts
+declare const useDebouncedWatch: <T extends FormFieldNames[]>(delay: number, ...name: T) => FormFieldArray<T>;
+//#endregion
+export { useDebouncedWatch };
+//# sourceMappingURL=useDebouncedWatch.d.ts.map

package/dist/esm/hooks/useDebouncedWatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedWatch.d.ts","names":[],"sources":["../../../src/hooks/useDebouncedWatch.ts"],"mappings":";;cAIa,oBAAqB,UAAU,kBAC1C,kBACG,MAAM,MACR,eAAe"}

package/dist/esm/hooks/useDisplayedTokens.js

@@ -0,0 +1,48 @@
+import { useTokens } from "./useTokens.js";
+import { isSearchMatch } from "../utils/tokenList.js";
+import { usePinnedTokensStore } from "../stores/pinnedTokens/PinnedTokensStore.js";
+import { useMemo } from "react";
+//#region src/hooks/useDisplayedTokens.ts
+const useDisplayedTokens = (selectedChainId, formType, isAllNetworks, search) => {
+	const { allTokens, isLoading: isTokensLoading, isSearchLoading } = useTokens(formType, search, isAllNetworks ? void 0 : selectedChainId);
+	const pinnedTokens = usePinnedTokensStore((state) => state.pinnedTokens);
+	const isPinnedToken = useMemo(() => {
+		if (isAllNetworks) {
+			const pinnedSet = /* @__PURE__ */ new Set();
+			Object.entries(pinnedTokens).forEach(([chainIdStr, addresses]) => {
+				const chainId = Number.parseInt(chainIdStr, 10);
+				addresses.forEach((address) => {
+					pinnedSet.add(`${chainId}-${address.toLowerCase()}`);
+				});
+			});
+			return (chainId, tokenAddress) => pinnedSet.has(`${chainId}-${tokenAddress.toLowerCase()}`);
+		}
+		if (selectedChainId) {
+			const chainPinnedTokens = pinnedTokens[selectedChainId] || [];
+			const pinnedSet = new Set(chainPinnedTokens.map((addr) => addr.toLowerCase()));
+			return (chainId, tokenAddress) => chainId === selectedChainId && pinnedSet.has(tokenAddress.toLowerCase());
+		}
+	}, [
+		isAllNetworks,
+		selectedChainId,
+		pinnedTokens
+	]);
+	return {
+		allTokens,
+		displayedTokensList: useMemo(() => {
+			return (isAllNetworks ? Object.values(allTokens ?? {}).flat() : selectedChainId ? allTokens?.[selectedChainId] : void 0)?.filter((t) => isSearchMatch(t, search)) ?? [];
+		}, [
+			allTokens,
+			isAllNetworks,
+			selectedChainId,
+			search
+		]),
+		isPinnedToken,
+		isTokensLoading,
+		isSearchLoading
+	};
+};
+//#endregion
+export { useDisplayedTokens };
+
+//# sourceMappingURL=useDisplayedTokens.js.map

package/dist/esm/hooks/useDisplayedTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisplayedTokens.js","names":[],"sources":["../../../src/hooks/useDisplayedTokens.ts"],"sourcesContent":["import type { TokenExtended } from '@lifi/sdk'\nimport { useMemo } from 'react'\nimport type { FormType } from '../stores/form/types.js'\nimport { usePinnedTokensStore } from '../stores/pinnedTokens/PinnedTokensStore.js'\nimport { isSearchMatch } from '../utils/tokenList.js'\nimport { useTokens } from './useTokens.js'\n\nexport type IsPinnedToken = (chainId: number, tokenAddress: string) => boolean\n\n// Balance-free core shared by useTokenList and useTokenBalances.\nexport const useDisplayedTokens = (\n  selectedChainId?: number,\n  formType?: FormType,\n  isAllNetworks?: boolean,\n  search?: string\n): {\n  allTokens: Record<number, TokenExtended[]> | undefined\n  displayedTokensList: TokenExtended[]\n  isPinnedToken: IsPinnedToken | undefined\n  isTokensLoading: boolean\n  isSearchLoading: boolean\n} => {\n  const {\n    allTokens,\n    isLoading: isTokensLoading,\n    isSearchLoading,\n  } = useTokens(formType, search, isAllNetworks ? undefined : selectedChainId)\n\n  const pinnedTokens = usePinnedTokensStore((state) => state.pinnedTokens)\n\n  const isPinnedToken = useMemo<IsPinnedToken | undefined>(() => {\n    if (isAllNetworks) {\n      const pinnedSet = new Set<string>()\n      Object.entries(pinnedTokens).forEach(([chainIdStr, addresses]) => {\n        const chainId = Number.parseInt(chainIdStr, 10)\n        addresses.forEach((address) => {\n          pinnedSet.add(`${chainId}-${address.toLowerCase()}`)\n        })\n      })\n      return (chainId, tokenAddress) =>\n        pinnedSet.has(`${chainId}-${tokenAddress.toLowerCase()}`)\n    }\n    if (selectedChainId) {\n      const chainPinnedTokens = pinnedTokens[selectedChainId] || []\n      const pinnedSet = new Set(\n        chainPinnedTokens.map((addr) => addr.toLowerCase())\n      )\n      return (chainId, tokenAddress) =>\n        chainId === selectedChainId && pinnedSet.has(tokenAddress.toLowerCase())\n    }\n    return undefined\n  }, [isAllNetworks, selectedChainId, pinnedTokens])\n\n  const displayedTokensList = useMemo(() => {\n    const tokensByChain = isAllNetworks\n      ? Object.values(allTokens ?? {}).flat()\n      : selectedChainId\n        ? allTokens?.[selectedChainId]\n        : undefined\n    return tokensByChain?.filter((t) => isSearchMatch(t, search)) ?? []\n  }, [allTokens, isAllNetworks, selectedChainId, search])\n\n  return {\n    allTokens,\n    displayedTokensList,\n    isPinnedToken,\n    isTokensLoading,\n    isSearchLoading,\n  }\n}\n"],"mappings":";;;;;AAUA,MAAa,sBACX,iBACA,UACA,eACA,WAOG;CACH,MAAM,EACJ,WACA,WAAW,iBACX,oBACE,UAAU,UAAU,QAAQ,gBAAgB,KAAA,IAAY,eAAe;CAE3E,MAAM,eAAe,sBAAsB,UAAU,MAAM,YAAY;CAEvE,MAAM,gBAAgB,cAAyC;EAC7D,IAAI,eAAe;GACjB,MAAM,4BAAY,IAAI,IAAY;GAClC,OAAO,QAAQ,YAAY,CAAC,CAAC,SAAS,CAAC,YAAY,eAAe;IAChE,MAAM,UAAU,OAAO,SAAS,YAAY,EAAE;IAC9C,UAAU,SAAS,YAAY;KAC7B,UAAU,IAAI,GAAG,QAAQ,GAAG,QAAQ,YAAY,GAAG;IACrD,CAAC;GACH,CAAC;GACD,QAAQ,SAAS,iBACf,UAAU,IAAI,GAAG,QAAQ,GAAG,aAAa,YAAY,GAAG;EAC5D;EACA,IAAI,iBAAiB;GACnB,MAAM,oBAAoB,aAAa,oBAAoB,CAAC;GAC5D,MAAM,YAAY,IAAI,IACpB,kBAAkB,KAAK,SAAS,KAAK,YAAY,CAAC,CACpD;GACA,QAAQ,SAAS,iBACf,YAAY,mBAAmB,UAAU,IAAI,aAAa,YAAY,CAAC;EAC3E;CAEF,GAAG;EAAC;EAAe;EAAiB;CAAY,CAAC;CAWjD,OAAO;EACL;EACA,qBAX0B,cAAc;GAMxC,QALsB,gBAClB,OAAO,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,IACpC,kBACE,YAAY,mBACZ,KAAA,EAAA,EACgB,QAAQ,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC;EACpE,GAAG;GAAC;GAAW;GAAe;GAAiB;EAAM,CAIjC;EAClB;EACA;EACA;CACF;AACF"}

package/dist/esm/hooks/useExplorer.d.ts

@@ -0,0 +1,14 @@
+import { Chain } from "@lifi/sdk";
+//#region src/hooks/useExplorer.d.ts
+type TransactionLinkProps = {
+  chain?: Chain | number;
+  txHash?: string;
+  txLink?: string;
+};
+declare const useExplorer: () => {
+  getTransactionLink: (props: TransactionLinkProps) => string | undefined;
+  getAddressLink: (address: string, chain?: Chain | number) => string;
+};
+//#endregion
+export { useExplorer };
+//# sourceMappingURL=useExplorer.d.ts.map

package/dist/esm/hooks/useExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExplorer.d.ts","names":[],"sources":["../../../src/hooks/useExplorer.ts"],"mappings":";;KAiBK;EACH,QAAQ;EACR;EACA;;cAGW;EACX,qBAAqB,OAAO;EAC5B,iBAAiB,iBAAiB,QAAQ"}

package/dist/esm/hooks/useHeader.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+//#region src/hooks/useHeader.d.ts
+declare function useHeader(title: string, action?: ReactNode): void;
+//#endregion
+export { useHeader };
+//# sourceMappingURL=useHeader.d.ts.map

package/dist/esm/hooks/useHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeader.d.ts","names":[],"sources":["../../../src/hooks/useHeader.ts"],"mappings":";;iBAIgB,UAAU,eAAe,SAAS"}

package/dist/esm/hooks/useListHeight.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+//#region src/hooks/useListHeight.d.ts
+interface UseContentHeightProps {
+  listParentRef: RefObject<HTMLUListElement | HTMLDivElement | null>;
+  headerRef?: RefObject<HTMLElement | null>;
+}
+declare const useListHeight: ({ listParentRef, headerRef }: UseContentHeightProps) => {
+  listHeight: number;
+};
+//#endregion
+export { useListHeight };
+//# sourceMappingURL=useListHeight.d.ts.map

package/dist/esm/hooks/useListHeight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListHeight.d.ts","names":[],"sources":["../../../src/hooks/useListHeight.ts"],"mappings":";;UAoDU;EACR,eAAe,UAAU,mBAAmB;EAC5C,YAAY,UAAU;;cAUX,kBACX,eACA,aACC;EAA0B"}

package/dist/esm/hooks/useListHeight.js

@@ -14,6 +14,7 @@ const getContentHeight = (elementId, listParentRef) => {
 	}
 	if (!containerElement || !headerElement) {
 		console.warn(`Can't find widget-scrollable-container or widget-header id.`);
+		if (listParentElement && oldHeight !== void 0) listParentElement.style.height = oldHeight;
 		return 0;
 	}
 	const { height: containerHeight } = containerElement.getBoundingClientRect();

package/dist/esm/hooks/useListHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListHeight.js","names":[],"sources":["../../../src/hooks/useListHeight.ts"],"sourcesContent":["import { debounce, useTheme } from '@mui/material'\nimport type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\nimport {\n  ElementId,\n  getAppContainer,\n  getHeaderElement,\n  getScrollableContainer,\n} from '../utils/elements.js'\nimport { useDefaultElementId } from './useDefaultElementId.js'\n\nconst getContentHeight = (\n  elementId: string,\n  listParentRef: RefObject<HTMLUListElement | HTMLDivElement | null>\n) => {\n  const containerElement = getScrollableContainer(elementId)\n\n  const headerElement = getHeaderElement(elementId)\n\n  const listParentElement = listParentRef?.current\n\n  let oldHeight: string | undefined\n\n  // This covers the case where in full height flex mode when the browser height is reduced\n  // - this allows a virtualised list to be made smaller\n  if (listParentElement) {\n    oldHeight = listParentElement.style.height\n    listParentElement.style.height = '0'\n  }\n\n  if (!containerElement || !headerElement) {\n    console.warn(\n      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`\n    )\n    return 0\n  }\n  const { height: containerHeight } = containerElement.getBoundingClientRect()\n  const { height: headerHeight } = headerElement.getBoundingClientRect()\n\n  // This covers the case where in full height flex mode when the browser height is reduced the\n  // - this allows a virtualised list to be set to minimum size\n  if (listParentElement && oldHeight) {\n    listParentElement.style.height = oldHeight\n  }\n\n  return containerHeight - headerHeight\n}\n\ninterface UseContentHeightProps {\n  listParentRef: RefObject<HTMLUListElement | HTMLDivElement | null>\n  headerRef?: RefObject<HTMLElement | null>\n}\n\nconst defaultMinListHeight = 360\nconst minMobileListHeight = 160\n\n// NOTE: this hook is implicitly tied to the widget height functionality in the\n//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts\n//   CSS changes in those components can have implications for the functionality in this hook\n\nexport const useListHeight = ({\n  listParentRef,\n  headerRef,\n}: UseContentHeightProps): { listHeight: number } => {\n  const elementId = useDefaultElementId() ?? ''\n  const [contentHeight, setContentHeight] = useState<number>(0)\n  const theme = useTheme()\n\n  useLayoutEffect(() => {\n    const handleResize = () => {\n      setContentHeight(getContentHeight(elementId, listParentRef))\n    }\n\n    const processResize = debounce(() => handleResize(), 40)\n\n    // calling this on initial mount prevents the lists resizing appearing glitchy\n    handleResize()\n\n    const appContainer = getAppContainer(elementId)\n\n    let resizeObserver: ResizeObserver\n    if (appContainer) {\n      resizeObserver = new ResizeObserver(processResize)\n      resizeObserver.observe(appContainer)\n    }\n\n    return () => {\n      if (resizeObserver) {\n        resizeObserver.disconnect()\n      }\n    }\n  }, [elementId, listParentRef])\n\n  const minListHeight =\n    theme.container?.height === '100%'\n      ? minMobileListHeight\n      : defaultMinListHeight\n\n  const listHeight = Math.max(\n    contentHeight - (headerRef?.current?.offsetHeight ?? 0),\n    minListHeight\n  )\n\n  return {\n    listHeight,\n  }\n}\n"],"mappings":";;;;;AAWA,MAAM,oBACJ,WACA,kBACG;CACH,MAAM,mBAAmB,uBAAuB,SAAS;CAEzD,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,MAAM,oBAAoB,eAAe;CAEzC,IAAI;CAIJ,IAAI,mBAAmB;EACrB,YAAY,kBAAkB,MAAM;EACpC,kBAAkB,MAAM,SAAS;CACnC;CAEA,IAAI,CAAC,oBAAoB,CAAC,eAAe;EACvC,QAAQ,KACN,6DACF;EACA,OAAO;CACT;CACA,MAAM,EAAE,QAAQ,oBAAoB,iBAAiB,sBAAsB;CAC3E,MAAM,EAAE,QAAQ,iBAAiB,cAAc,sBAAsB;CAIrE,IAAI,qBAAqB,WACvB,kBAAkB,MAAM,SAAS;CAGnC,OAAO,kBAAkB;AAC3B;AAOA,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAM5B,MAAa,iBAAiB,EAC5B,eACA,gBACmD;CACnD,MAAM,YAAY,oBAAoB,KAAK;CAC3C,MAAM,CAAC,eAAe,oBAAoB,SAAiB,CAAC;CAC5D,MAAM,QAAQ,SAAS;CAEvB,sBAAsB;EACpB,MAAM,qBAAqB;GACzB,iBAAiB,iBAAiB,WAAW,aAAa,CAAC;EAC7D;EAEA,MAAM,gBAAgB,eAAe,aAAa,GAAG,EAAE;EAGvD,aAAa;EAEb,MAAM,eAAe,gBAAgB,SAAS;EAE9C,IAAI;EACJ,IAAI,cAAc;GAChB,iBAAiB,IAAI,eAAe,aAAa;GACjD,eAAe,QAAQ,YAAY;EACrC;EAEA,aAAa;GACX,IAAI,gBACF,eAAe,WAAW;EAE9B;CACF,GAAG,CAAC,WAAW,aAAa,CAAC;CAE7B,MAAM,gBACJ,MAAM,WAAW,WAAW,SACxB,sBACA;CAON,OAAO,EACL,YANiB,KAAK,IACtB,iBAAiB,WAAW,SAAS,gBAAgB,IACrD,aAIS,EACX;AACF"}
+{"version":3,"file":"useListHeight.js","names":[],"sources":["../../../src/hooks/useListHeight.ts"],"sourcesContent":["import { debounce, useTheme } from '@mui/material'\nimport type { RefObject } from 'react'\nimport { useLayoutEffect, useState } from 'react'\nimport {\n  ElementId,\n  getAppContainer,\n  getHeaderElement,\n  getScrollableContainer,\n} from '../utils/elements.js'\nimport { useDefaultElementId } from './useDefaultElementId.js'\n\nconst getContentHeight = (\n  elementId: string,\n  listParentRef: RefObject<HTMLUListElement | HTMLDivElement | null>\n) => {\n  const containerElement = getScrollableContainer(elementId)\n\n  const headerElement = getHeaderElement(elementId)\n\n  const listParentElement = listParentRef?.current\n\n  let oldHeight: string | undefined\n\n  // This covers the case where in full height flex mode when the browser height is reduced\n  // - this allows a virtualised list to be made smaller\n  if (listParentElement) {\n    oldHeight = listParentElement.style.height\n    listParentElement.style.height = '0'\n  }\n\n  if (!containerElement || !headerElement) {\n    console.warn(\n      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`\n    )\n    // Restore the height we zeroed above before returning early\n    if (listParentElement && oldHeight !== undefined) {\n      listParentElement.style.height = oldHeight\n    }\n    return 0\n  }\n  const { height: containerHeight } = containerElement.getBoundingClientRect()\n  const { height: headerHeight } = headerElement.getBoundingClientRect()\n\n  // This covers the case where in full height flex mode when the browser height is reduced the\n  // - this allows a virtualised list to be set to minimum size\n  if (listParentElement && oldHeight) {\n    listParentElement.style.height = oldHeight\n  }\n\n  return containerHeight - headerHeight\n}\n\ninterface UseContentHeightProps {\n  listParentRef: RefObject<HTMLUListElement | HTMLDivElement | null>\n  headerRef?: RefObject<HTMLElement | null>\n}\n\nconst defaultMinListHeight = 360\nconst minMobileListHeight = 160\n\n// NOTE: this hook is implicitly tied to the widget height functionality in the\n//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts\n//   CSS changes in those components can have implications for the functionality in this hook\n\nexport const useListHeight = ({\n  listParentRef,\n  headerRef,\n}: UseContentHeightProps): { listHeight: number } => {\n  const elementId = useDefaultElementId() ?? ''\n  const [contentHeight, setContentHeight] = useState<number>(0)\n  const theme = useTheme()\n\n  useLayoutEffect(() => {\n    const handleResize = () => {\n      setContentHeight(getContentHeight(elementId, listParentRef))\n    }\n\n    const processResize = debounce(() => handleResize(), 40)\n\n    // calling this on initial mount prevents the lists resizing appearing glitchy\n    handleResize()\n\n    const appContainer = getAppContainer(elementId)\n\n    let resizeObserver: ResizeObserver\n    if (appContainer) {\n      resizeObserver = new ResizeObserver(processResize)\n      resizeObserver.observe(appContainer)\n    }\n\n    return () => {\n      if (resizeObserver) {\n        resizeObserver.disconnect()\n      }\n    }\n  }, [elementId, listParentRef])\n\n  const minListHeight =\n    theme.container?.height === '100%'\n      ? minMobileListHeight\n      : defaultMinListHeight\n\n  const listHeight = Math.max(\n    contentHeight - (headerRef?.current?.offsetHeight ?? 0),\n    minListHeight\n  )\n\n  return {\n    listHeight,\n  }\n}\n"],"mappings":";;;;;AAWA,MAAM,oBACJ,WACA,kBACG;CACH,MAAM,mBAAmB,uBAAuB,SAAS;CAEzD,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,MAAM,oBAAoB,eAAe;CAEzC,IAAI;CAIJ,IAAI,mBAAmB;EACrB,YAAY,kBAAkB,MAAM;EACpC,kBAAkB,MAAM,SAAS;CACnC;CAEA,IAAI,CAAC,oBAAoB,CAAC,eAAe;EACvC,QAAQ,KACN,6DACF;EAEA,IAAI,qBAAqB,cAAc,KAAA,GACrC,kBAAkB,MAAM,SAAS;EAEnC,OAAO;CACT;CACA,MAAM,EAAE,QAAQ,oBAAoB,iBAAiB,sBAAsB;CAC3E,MAAM,EAAE,QAAQ,iBAAiB,cAAc,sBAAsB;CAIrE,IAAI,qBAAqB,WACvB,kBAAkB,MAAM,SAAS;CAGnC,OAAO,kBAAkB;AAC3B;AAOA,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAM5B,MAAa,iBAAiB,EAC5B,eACA,gBACmD;CACnD,MAAM,YAAY,oBAAoB,KAAK;CAC3C,MAAM,CAAC,eAAe,oBAAoB,SAAiB,CAAC;CAC5D,MAAM,QAAQ,SAAS;CAEvB,sBAAsB;EACpB,MAAM,qBAAqB;GACzB,iBAAiB,iBAAiB,WAAW,aAAa,CAAC;EAC7D;EAEA,MAAM,gBAAgB,eAAe,aAAa,GAAG,EAAE;EAGvD,aAAa;EAEb,MAAM,eAAe,gBAAgB,SAAS;EAE9C,IAAI;EACJ,IAAI,cAAc;GAChB,iBAAiB,IAAI,eAAe,aAAa;GACjD,eAAe,QAAQ,YAAY;EACrC;EAEA,aAAa;GACX,IAAI,gBACF,eAAe,WAAW;EAE9B;CACF,GAAG,CAAC,WAAW,aAAa,CAAC;CAE7B,MAAM,gBACJ,MAAM,WAAW,WAAW,SACxB,sBACA;CAON,OAAO,EACL,YANiB,KAAK,IACtB,iBAAiB,WAAW,SAAS,gBAAgB,IACrD,aAIS,EACX;AACF"}

package/dist/esm/hooks/useNavigateBack.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/useNavigateBack.d.ts
+declare const useNavigateBack: () => (() => void);
+//#endregion
+export { useNavigateBack };
+//# sourceMappingURL=useNavigateBack.d.ts.map

package/dist/esm/hooks/useNavigateBack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigateBack.d.ts","names":[],"sources":["../../../src/hooks/useNavigateBack.ts"],"mappings":";cAIa"}

package/dist/esm/hooks/usePacedRouteExecution.js

@@ -1,3 +1,4 @@
+import "../stores/routes/types.js";
 import { useRouteExecution } from "./useRouteExecution.js";
 import { usePacedValue } from "./usePacedValue.js";
 import { useMemo } from "react";

package/dist/esm/hooks/usePacedRouteExecution.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePacedRouteExecution.js","names":[],"sources":["../../../src/hooks/usePacedRouteExecution.ts"],"sourcesContent":["import type { ExchangeRateUpdateParams, RouteExtended } from '@lifi/sdk'\nimport { useMemo } from 'react'\nimport { RouteExecutionStatus } from '../stores/routes/types.js'\nimport { usePacedValue } from './usePacedValue.js'\nimport { useRouteExecution } from './useRouteExecution.js'\n\ninterface PacedRouteExecutionProps {\n  routeId: string\n  onAcceptExchangeRateUpdate?(\n    resolver: (value: boolean) => void,\n    data: ExchangeRateUpdateParams\n  ): void\n}\n\n/**\n * Wraps {@link useRouteExecution} and paces `route`/`status` so the\n * `ExecutionStatusCard` animation has time to play between updates. Only the\n * display is paced — events and store writes happen at the SDK's real speed.\n */\nexport function usePacedRouteExecution({\n  routeId,\n  onAcceptExchangeRateUpdate,\n}: PacedRouteExecutionProps): {\n  executeRoute: () => void\n  restartRoute: () => void\n  deleteRoute: () => void\n  route: RouteExtended | undefined\n  status: RouteExecutionStatus | undefined\n} {\n  const { executeRoute, restartRoute, deleteRoute, route, status } =\n    useRouteExecution({ routeId, onAcceptExchangeRateUpdate })\n\n  // Pace route and status as one value so they always match. Skip pacing while\n  // Idle, so the review screen shows live data.\n  const live = useMemo(() => ({ route, status }), [route, status])\n  const display = usePacedValue(live, status !== RouteExecutionStatus.Idle)\n\n  return {\n    executeRoute,\n    restartRoute,\n    deleteRoute,\n    route: display.route,\n    status: display.status,\n  }\n}\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,uBAAuB,EACrC,SACA,8BAOA;CACA,MAAM,EAAE,cAAc,cAAc,aAAa,OAAO,WACtD,kBAAkB;EAAE;EAAS;CAA2B,CAAC;CAK3D,MAAM,UAAU,cADH,eAAe;EAAE;EAAO;CAAO,IAAI,CAAC,OAAO,MAAM,CAC7B,GAAG,WAAA,CAAoC;CAExE,OAAO;EACL;EACA;EACA;EACA,OAAO,QAAQ;EACf,QAAQ,QAAQ;CAClB;AACF"}
+{"version":3,"file":"usePacedRouteExecution.js","names":[],"sources":["../../../src/hooks/usePacedRouteExecution.ts"],"sourcesContent":["import type { ExchangeRateUpdateParams, RouteExtended } from '@lifi/sdk'\nimport { useMemo } from 'react'\nimport { RouteExecutionStatus } from '../stores/routes/types.js'\nimport { usePacedValue } from './usePacedValue.js'\nimport { useRouteExecution } from './useRouteExecution.js'\n\ninterface PacedRouteExecutionProps {\n  routeId: string\n  onAcceptExchangeRateUpdate?(\n    resolver: (value: boolean) => void,\n    data: ExchangeRateUpdateParams\n  ): void\n}\n\n/**\n * Wraps {@link useRouteExecution} and paces `route`/`status` so the\n * `ExecutionStatusCard` animation has time to play between updates. Only the\n * display is paced — events and store writes happen at the SDK's real speed.\n */\nexport function usePacedRouteExecution({\n  routeId,\n  onAcceptExchangeRateUpdate,\n}: PacedRouteExecutionProps): {\n  executeRoute: () => void\n  restartRoute: () => void\n  deleteRoute: () => void\n  route: RouteExtended | undefined\n  status: RouteExecutionStatus | undefined\n} {\n  const { executeRoute, restartRoute, deleteRoute, route, status } =\n    useRouteExecution({ routeId, onAcceptExchangeRateUpdate })\n\n  // Pace route and status as one value so they always match. Skip pacing while\n  // Idle, so the review screen shows live data.\n  const live = useMemo(() => ({ route, status }), [route, status])\n  const display = usePacedValue(live, status !== RouteExecutionStatus.Idle)\n\n  return {\n    executeRoute,\n    restartRoute,\n    deleteRoute,\n    route: display.route,\n    status: display.status,\n  }\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,uBAAuB,EACrC,SACA,8BAOA;CACA,MAAM,EAAE,cAAc,cAAc,aAAa,OAAO,WACtD,kBAAkB;EAAE;EAAS;CAA2B,CAAC;CAK3D,MAAM,UAAU,cADH,eAAe;EAAE;EAAO;CAAO,IAAI,CAAC,OAAO,MAAM,CAC7B,GAAG,WAAA,CAAoC;CAExE,OAAO;EACL;EACA;EACA;EACA,OAAO,QAAQ;EACf,QAAQ,QAAQ;CAClB;AACF"}

package/dist/esm/hooks/useRouteExecution.d.ts

@@ -0,0 +1,18 @@
+import { RouteExecutionStatus } from "../stores/routes/types.js";
+import { ExchangeRateUpdateParams, RouteExtended } from "@lifi/sdk";
+//#region src/hooks/useRouteExecution.d.ts
+interface RouteExecutionProps {
+  routeId: string;
+  executeInBackground?: boolean;
+  onAcceptExchangeRateUpdate?(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
+}
+declare const useRouteExecution: ({ routeId, executeInBackground, onAcceptExchangeRateUpdate }: RouteExecutionProps) => {
+  executeRoute: () => void;
+  restartRoute: () => void;
+  deleteRoute: () => void;
+  route: RouteExtended | undefined;
+  status: RouteExecutionStatus | undefined;
+};
+//#endregion
+export { useRouteExecution };
+//# sourceMappingURL=useRouteExecution.d.ts.map