@lifi/widget 4.3.1 → 4.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"SentToWalletRow.js","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.tsx"],"sourcesContent":["import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Box, IconButton } from '@mui/material'\nimport type { MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { ActionIconCircle, ExternalLink } from './SentToWalletRow.style.js'\n\ninterface SentToWalletRowProps {\n  toAddress: string\n  toChainId: number\n}\n\nexport const SentToWalletRow: React.FC<SentToWalletRowProps> = ({\n  toAddress,\n  toChainId,\n}) => {\n  const { t } = useTranslation()\n  const { getAddressLink } = useExplorer()\n  const addressLink = getAddressLink(toAddress, toChainId)\n\n  const handleCopy = (e: MouseEvent) => {\n    e.stopPropagation()\n    navigator.clipboard.writeText(toAddress)\n  }\n\n  return (\n    <ActionRow\n      startAdornment={\n        <ActionIconCircle>\n          <Wallet color=\"success\" sx={{ fontSize: 16 }} />\n        </ActionIconCircle>\n      }\n      message={`${t('main.sentToWallet')}: ${shortenAddress(toAddress)}`}\n      endAdornment={\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n          <IconButton size=\"small\" onClick={handleCopy} sx={{ p: 0.5 }}>\n            <ContentCopyRounded sx={{ fontSize: 16 }} />\n          </IconButton>\n          {addressLink ? (\n            <ExternalLink\n              href={addressLink}\n              target=\"_blank\"\n              rel=\"nofollow noreferrer\"\n            >\n              <OpenInNew sx={{ fontSize: 16 }} />\n            </ExternalLink>\n          ) : undefined}\n        </Box>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,WACA,gBACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,mBAAmB,YAAY;CACvC,MAAM,cAAc,eAAe,WAAW,SAAS;CAEvD,MAAM,cAAc,MAAkB;EACpC,EAAE,gBAAgB;EAClB,UAAU,UAAU,UAAU,SAAS;CACzC;CAEA,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,QAAD;GAAQ,OAAM;GAAU,IAAI,EAAE,UAAU,GAAG;EAAI,CAAA,EAC/B,CAAA;EAEpB,SAAS,GAAG,EAAE,mBAAmB,EAAE,IAAI,eAAe,SAAS;EAC/D,cACE,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;aAA3D,CACE,oBAAC,YAAD;IAAY,MAAK;IAAQ,SAAS;IAAY,IAAI,EAAE,GAAG,GAAI;cACzD,oBAAC,oBAAD,EAAoB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACjC,CAAA,GACX,cACC,oBAAC,cAAD;IACE,MAAM;IACN,QAAO;IACP,KAAI;cAEJ,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACtB,CAAA,IACZ,KAAA,CACD;;CAER,CAAA;AAEL"}
+{"version":3,"file":"SentToWalletRow.js","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.tsx"],"sourcesContent":["import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Box, IconButton } from '@mui/material'\nimport type { MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { ActionIconCircle, ExternalLink } from './SentToWalletRow.style.js'\n\ninterface SentToWalletRowProps {\n  toAddress: string\n  toChainId: number\n}\n\nexport const SentToWalletRow: React.FC<SentToWalletRowProps> = ({\n  toAddress,\n  toChainId,\n}) => {\n  const { t } = useTranslation()\n  const { getAddressLink } = useExplorer()\n  const addressLink = getAddressLink(toAddress, toChainId)\n\n  const handleCopy = (e: MouseEvent) => {\n    e.stopPropagation()\n    navigator.clipboard.writeText(toAddress)\n  }\n\n  return (\n    <ActionRow\n      startAdornment={\n        <ActionIconCircle>\n          <Wallet color=\"success\" sx={{ fontSize: 16 }} />\n        </ActionIconCircle>\n      }\n      message={`${t('main.sentToWallet')}: ${shortenAddress(toAddress)}`}\n      endAdornment={\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n          <IconButton size=\"small\" onClick={handleCopy} sx={{ p: 0.5 }}>\n            <ContentCopyRounded sx={{ fontSize: 16 }} />\n          </IconButton>\n          {addressLink ? (\n            <ExternalLink\n              href={addressLink}\n              target=\"_blank\"\n              rel=\"nofollow noreferrer\"\n            >\n              <OpenInNew sx={{ fontSize: 16 }} />\n            </ExternalLink>\n          ) : undefined}\n        </Box>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,WACA,gBACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,mBAAmB,YAAY;CACvC,MAAM,cAAc,eAAe,WAAW,SAAS;CAEvD,MAAM,cAAc,MAAkB;EACpC,EAAE,gBAAgB;EAClB,UAAU,UAAU,UAAU,SAAS;CACzC;CAEA,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,QAAD;GAAQ,OAAM;GAAU,IAAI,EAAE,UAAU,GAAG;EAAI,CAAA,EAC/B,CAAA;EAEpB,SAAS,GAAG,EAAE,mBAAmB,EAAE,IAAI,eAAe,SAAS;EAC/D,cACE,qBAAC,KAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;GAA3D,UAAA,CACE,oBAAC,YAAD;IAAY,MAAK;IAAQ,SAAS;IAAY,IAAI,EAAE,GAAG,GAAI;IACzD,UAAA,oBAAC,oBAAD,EAAoB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACjC,CAAA,GACX,cACC,oBAAC,cAAD;IACE,MAAM;IACN,QAAO;IACP,KAAI;IAEJ,UAAA,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACtB,CAAA,IACZ,KAAA,CACD;;CAER,CAAA;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepActionRow.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.tsx"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport type React from 'react'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { ExternalLink } from './StepActionRow.style.js'\n\nexport const StepActionRow: React.FC<{\n  step: LiFiStepExtended\n  action: ExecutionAction\n  href: string\n  defaultLabelsOnly?: boolean\n}> = ({ step, action, href, defaultLabelsOnly }) => {\n  const { title } = useActionMessage(step, action, defaultLabelsOnly)\n  const isFailed = action?.status === 'FAILED'\n  return (\n    <ActionRow\n      startAdornment={\n        <IconCircle status={isFailed ? 'error' : 'success'} size={24} />\n      }\n      message={title ?? ''}\n      endAdornment={\n        <ExternalLink href={href} target=\"_blank\" rel=\"nofollow noreferrer\">\n          <OpenInNew sx={{ fontSize: 16 }} />\n        </ExternalLink>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,iBAKP,EAAE,MAAM,QAAQ,MAAM,wBAAwB;CAClD,MAAM,EAAE,UAAU,iBAAiB,MAAM,QAAQ,iBAAiB;CAElE,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,YAAD;GAAY,QAJD,QAAQ,WAAW,WAIC,UAAU;GAAW,MAAM;EAAK,CAAA;EAEjE,SAAS,SAAS;EAClB,cACE,oBAAC,cAAD;GAAoB;GAAM,QAAO;GAAS,KAAI;aAC5C,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;EACtB,CAAA;CAEjB,CAAA;AAEL"}
+{"version":3,"file":"StepActionRow.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.tsx"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport OpenInNew from '@mui/icons-material/OpenInNew'\nimport type React from 'react'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { ExternalLink } from './StepActionRow.style.js'\n\nexport const StepActionRow: React.FC<{\n  step: LiFiStepExtended\n  action: ExecutionAction\n  href: string\n  defaultLabelsOnly?: boolean\n}> = ({ step, action, href, defaultLabelsOnly }) => {\n  const { title } = useActionMessage(step, action, defaultLabelsOnly)\n  const isFailed = action?.status === 'FAILED'\n  return (\n    <ActionRow\n      startAdornment={\n        <IconCircle status={isFailed ? 'error' : 'success'} size={24} />\n      }\n      message={title ?? ''}\n      endAdornment={\n        <ExternalLink href={href} target=\"_blank\" rel=\"nofollow noreferrer\">\n          <OpenInNew sx={{ fontSize: 16 }} />\n        </ExternalLink>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;AAQA,MAAa,iBAKP,EAAE,MAAM,QAAQ,MAAM,wBAAwB;CAClD,MAAM,EAAE,UAAU,iBAAiB,MAAM,QAAQ,iBAAiB;CAElE,OACE,oBAAC,WAAD;EACE,gBACE,oBAAC,YAAD;GAAY,QAJD,QAAQ,WAAW,WAIC,UAAU;GAAW,MAAM;EAAK,CAAA;EAEjE,SAAS,SAAS;EAClB,cACE,oBAAC,cAAD;GAAoB;GAAM,QAAO;GAAS,KAAI;GAC5C,UAAA,oBAAC,WAAD,EAAW,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;EACtB,CAAA;CAEjB,CAAA;AAEL"}

package/dist/esm/components/StepActions/StepActionRow.style.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Link } from "@mui/material";
+//#region src/components/StepActions/StepActionRow.style.d.ts
+declare const ExternalLink: React.FC<React.ComponentProps<typeof Link>>;
+//#endregion
+export { ExternalLink };
+//# sourceMappingURL=StepActionRow.style.d.ts.map

package/dist/esm/components/StepActions/StepActionRow.style.d.ts.map

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

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

@@ -0,0 +1,12 @@
+import { RouteExtended } from "@lifi/sdk";
+import React from "react";
+//#region src/components/StepActions/StepActionsList.d.ts
+interface StepActionsListProps {
+  route: RouteExtended;
+  toAddress?: string;
+}
+/** Non-animated list of completed execution step rows (transaction details view). */
+declare const StepActionsList: React.FC<StepActionsListProps>;
+//#endregion
+export { StepActionsList };
+//# sourceMappingURL=StepActionsList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepActionsList.d.ts","names":[],"sources":["../../../../src/components/StepActions/StepActionsList.tsx"],"mappings":";;;UAMU;EACR,OAAO;EACP;;;cAIW,iBAAiB,MAAM,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepActionsList.js","names":[],"sources":["../../../../src/components/StepActions/StepActionsList.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { Fragment } from 'react'\nimport { renderExecutionRow, useExecutionRows } from './executionRows.js'\n\ninterface StepActionsListProps {\n  route: RouteExtended\n  toAddress?: string\n}\n\n/** Non-animated list of completed execution step rows (transaction details view). */\nexport const StepActionsList: React.FC<StepActionsListProps> = ({\n  route,\n  toAddress,\n}) => {\n  const rows = useExecutionRows(route, toAddress)\n\n  if (rows.length === 0) {\n    return null\n  }\n\n  const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      {rows.map((row, index) => (\n        <Fragment\n          key={\n            row.kind === 'action'\n              ? `${row.step.id}-${row.action.type}-${index}`\n              : `wallet-${row.toChainId}`\n          }\n        >\n          {renderExecutionRow(row, index === lastActionIndex)}\n        </Fragment>\n      ))}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAYA,MAAa,mBAAmD,EAC9D,OACA,gBACI;CACJ,MAAM,OAAO,iBAAiB,OAAO,SAAS;CAE9C,IAAI,KAAK,WAAW,GAClB,OAAO;CAGT,MAAM,kBAAkB,KAAK,eAAe,MAAM,EAAE,SAAS,QAAQ;CAErE,OACE,oBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;YAC3D,KAAK,KAAK,KAAK,UACd,oBAAC,UAAD,EAAA,UAOG,mBAAmB,KAAK,UAAU,eAAe,EAC1C,GANN,IAAI,SAAS,WACT,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,OAAO,KAAK,GAAG,UACrC,UAAU,IAAI,WAIZ,CACX;CACE,CAAA;AAET"}
+{"version":3,"file":"StepActionsList.js","names":[],"sources":["../../../../src/components/StepActions/StepActionsList.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { Fragment } from 'react'\nimport { renderExecutionRow, useExecutionRows } from './executionRows.js'\n\ninterface StepActionsListProps {\n  route: RouteExtended\n  toAddress?: string\n}\n\n/** Non-animated list of completed execution step rows (transaction details view). */\nexport const StepActionsList: React.FC<StepActionsListProps> = ({\n  route,\n  toAddress,\n}) => {\n  const rows = useExecutionRows(route, toAddress)\n\n  if (rows.length === 0) {\n    return null\n  }\n\n  const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      {rows.map((row, index) => (\n        <Fragment\n          key={\n            row.kind === 'action'\n              ? `${row.step.id}-${row.action.type}-${index}`\n              : `wallet-${row.toChainId}`\n          }\n        >\n          {renderExecutionRow(row, index === lastActionIndex)}\n        </Fragment>\n      ))}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAYA,MAAa,mBAAmD,EAC9D,OACA,gBACI;CACJ,MAAM,OAAO,iBAAiB,OAAO,SAAS;CAE9C,IAAI,KAAK,WAAW,GAClB,OAAO;CAGT,MAAM,kBAAkB,KAAK,eAAe,MAAM,EAAE,SAAS,QAAQ;CAErE,OACE,oBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;EAC3D,UAAA,KAAK,KAAK,KAAK,UACd,oBAAC,UAAD,EAAA,UAOG,mBAAmB,KAAK,UAAU,eAAe,EAC1C,GANN,IAAI,SAAS,WACT,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,OAAO,KAAK,GAAG,UACrC,UAAU,IAAI,WAIZ,CACX;CACE,CAAA;AAET"}

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

@@ -0,0 +1,26 @@
+import { ExecutionAction, LiFiStepExtended, RouteExtended } from "@lifi/sdk";
+import { ReactNode } from "react";
+//#region src/components/StepActions/executionRows.d.ts
+/**
+ * A row in an execution list: either a completed/failed action with an explorer
+ * link, or the recipient wallet row appended when a route has a `toAddress`.
+ */
+type ExecutionRow = {
+  kind: "action";
+  step: LiFiStepExtended;
+  action: ExecutionAction;
+  href: string;
+} | {
+  kind: "wallet";
+  toAddress: string;
+  toChainId: number;
+};
+/**
+ * The rows to display for a route: every `DONE`/`FAILED` action that has a
+ * transaction link, plus a wallet row when `toAddress` is set. Shared by the
+ * static step lists and the animated checklist.
+ */
+declare function useExecutionRows(route: RouteExtended, toAddress?: string): ExecutionRow[];
+//#endregion
+export { ExecutionRow, useExecutionRows };
+//# sourceMappingURL=executionRows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"executionRows.d.ts","names":[],"sources":["../../../../src/components/StepActions/executionRows.tsx"],"mappings":";;;;;;;KAgBY;EAEN;EACA,MAAM;EACN,QAAQ;EACR;;EAEA;EAAgB;EAAmB;;;;;;;iBAOzB,iBACd,OAAO,eACP,qBACC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SwapButton.js","names":["ArrowDownward"],"sources":["../../../../src/components/SwapButton/SwapButton.tsx"],"sourcesContent":["import ArrowDownward from '@mui/icons-material/ArrowDownward'\nimport type { BoxProps } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { SwapButtonContainer, SwapIconCard } from './SwapButton.style.js'\n\nexport const SwapButton: React.FC<BoxProps> = ({\n  sx,\n  ...props\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { mode } = useWidgetConfig()\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const { getChainById } = useAvailableChains()\n  const { tryResetToAddress } = useToAddressReset()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n\n  const handleClick = (): void => {\n    const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] =\n      getFieldValues(\n        'fromChain',\n        'fromToken',\n        'toChain',\n        'toToken',\n        'toAddress',\n        'toAmount'\n      )\n    const newFromAmount =\n      mode === 'limit' && toAmount ? (toAmount as string) : ''\n    setFieldValue('fromAmount', newFromAmount, { isTouched: true })\n    setFieldValue('fromChain', toChainId, { isTouched: true })\n    setFieldValue('fromToken', toToken, { isTouched: true })\n    setFieldValue('toChain', fromChainId, { isTouched: true })\n    setFieldValue('toToken', fromToken, { isTouched: true })\n\n    const autoPopulatedToAddress = autoPopulateToAddress({\n      formType: 'from',\n      selectedToAddress: toAddress,\n      selectedChainId: toChainId,\n      selectedOppositeChainId: fromChainId,\n      selectedOppositeTokenAddress: fromToken,\n    })\n\n    if (autoPopulatedToAddress) {\n      return\n    }\n\n    const toChain = getChainById(fromChainId)\n    if (toChain) {\n      tryResetToAddress(toChain)\n    }\n  }\n\n  return (\n    <SwapButtonContainer sx={sx} {...props}>\n      <SwapIconCard\n        component=\"button\"\n        onClick={handleClick}\n        aria-label={t('button.swap')}\n        data-testid=\"widget-swap-tokens-button\"\n      >\n        <ArrowDownward fontSize=\"inherit\" />\n      </SwapIconCard>\n    </SwapButtonContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,cAAkC,EAC7C,IACA,GAAG,YACc;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAA0B;EAC9B,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,WAAW,YAC5D,eACE,aACA,aACA,WACA,WACA,aACA,UACF;EAGF,cAAc,cADZ,SAAS,WAAW,WAAY,WAAsB,IACb,EAAE,WAAW,KAAK,CAAC;EAC9D,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAUvD,IAR+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAEyB,GACvB;EAGF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CAEA,OACE,oBAAC,qBAAD;EAAyB;EAAI,GAAI;YAC/B,oBAAC,cAAD;GACE,WAAU;GACV,SAAS;GACT,cAAY,EAAE,aAAa;GAC3B,eAAY;aAEZ,oBAACA,mBAAD,EAAe,UAAS,UAAW,CAAA;EACvB,CAAA;CACK,CAAA;AAEzB"}
+{"version":3,"file":"SwapButton.js","names":["ArrowDownward"],"sources":["../../../../src/components/SwapButton/SwapButton.tsx"],"sourcesContent":["import ArrowDownward from '@mui/icons-material/ArrowDownward'\nimport type { BoxProps } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { SwapButtonContainer, SwapIconCard } from './SwapButton.style.js'\n\nexport const SwapButton: React.FC<BoxProps> = ({\n  sx,\n  ...props\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { mode } = useWidgetConfig()\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const { getChainById } = useAvailableChains()\n  const { tryResetToAddress } = useToAddressReset()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n\n  const handleClick = (): void => {\n    const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] =\n      getFieldValues(\n        'fromChain',\n        'fromToken',\n        'toChain',\n        'toToken',\n        'toAddress',\n        'toAmount'\n      )\n    const newFromAmount =\n      mode === 'limit' && toAmount ? (toAmount as string) : ''\n    setFieldValue('fromAmount', newFromAmount, { isTouched: true })\n    setFieldValue('fromChain', toChainId, { isTouched: true })\n    setFieldValue('fromToken', toToken, { isTouched: true })\n    setFieldValue('toChain', fromChainId, { isTouched: true })\n    setFieldValue('toToken', fromToken, { isTouched: true })\n\n    const autoPopulatedToAddress = autoPopulateToAddress({\n      formType: 'from',\n      selectedToAddress: toAddress,\n      selectedChainId: toChainId,\n      selectedOppositeChainId: fromChainId,\n      selectedOppositeTokenAddress: fromToken,\n    })\n\n    if (autoPopulatedToAddress) {\n      return\n    }\n\n    const toChain = getChainById(fromChainId)\n    if (toChain) {\n      tryResetToAddress(toChain)\n    }\n  }\n\n  return (\n    <SwapButtonContainer sx={sx} {...props}>\n      <SwapIconCard\n        component=\"button\"\n        onClick={handleClick}\n        aria-label={t('button.swap')}\n        data-testid=\"widget-swap-tokens-button\"\n      >\n        <ArrowDownward fontSize=\"inherit\" />\n      </SwapIconCard>\n    </SwapButtonContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,cAAkC,EAC7C,IACA,GAAG,YACc;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAA0B;EAC9B,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,WAAW,YAC5D,eACE,aACA,aACA,WACA,WACA,aACA,UACF;EAGF,cAAc,cADZ,SAAS,WAAW,WAAY,WAAsB,IACb,EAAE,WAAW,KAAK,CAAC;EAC9D,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAUvD,IAR+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAEyB,GACvB;EAGF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CAEA,OACE,oBAAC,qBAAD;EAAyB;EAAI,GAAI;EAC/B,UAAA,oBAAC,cAAD;GACE,WAAU;GACV,SAAS;GACT,cAAY,EAAE,aAAa;GAC3B,eAAY;GAEZ,UAAA,oBAACA,mBAAD,EAAe,UAAS,UAAW,CAAA;EACvB,CAAA;CACK,CAAA;AAEzB"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextFitter.js","names":[],"sources":["../../../../src/components/TextFitter/TextFitter.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport type { TextFitterProps } from './types.js'\n\nconst initialState = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n}\n\nexport const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({\n  children,\n  width = '100%',\n  height,\n  preserveAspectRatio = 'xMinYMid meet',\n  textStyle,\n  svgStyle,\n  cropTop,\n  cropBottom,\n  onFit,\n}) => {\n  const theme = useTheme()\n  const textRef = useRef<SVGTextElement>(null)\n  const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState)\n\n  const [ref] = useInView({\n    onChange(inView) {\n      if (inView) {\n        calculateBox()\n      }\n    },\n  })\n\n  const calculateBox = useCallback(() => {\n    if (!textRef.current) {\n      return\n    }\n    const box = textRef.current.getBBox()\n    if (cropTop) {\n      box.y += box.height * cropTop\n      box.height -= box.height * cropTop\n    }\n    if (cropBottom) {\n      box.height -= box.height * cropBottom\n    }\n    setViewBox(box)\n    onFit?.()\n  }, [cropBottom, cropTop, onFit])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when children changes\n  useLayoutEffect(() => {\n    calculateBox()\n  }, [calculateBox, children])\n\n  useLayoutEffect(() => {\n    if (document.fonts) {\n      document.fonts.ready.then(() => {\n        calculateBox()\n      })\n    }\n  }, [calculateBox])\n\n  return (\n    <svg\n      style={svgStyle}\n      viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}\n      width={width}\n      height={height}\n      // height={\n      //   textRect.height && maxHeight && textRect.height >= maxHeight\n      //     ? maxHeight\n      //     : height\n      // }\n      preserveAspectRatio={preserveAspectRatio}\n      fill={theme.vars.palette.text.primary}\n      ref={ref}\n    >\n      <title>{children}</title>\n      <text x={0} y={0} style={textStyle} ref={textRef}>\n        {children}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAMA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,OAAO;CACP,QAAQ;AACV;AAEA,MAAa,cAA4D,EACvE,UACA,QAAQ,QACR,QACA,sBAAsB,iBACtB,WACA,UACA,SACA,YACA,YACI;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA2B,YAAY;CAErE,MAAM,CAAC,OAAO,UAAU,EACtB,SAAS,QAAQ;EACf,IAAI,QACF,aAAa;CAEjB,EACF,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,CAAC,QAAQ,SACX;EAEF,MAAM,MAAM,QAAQ,QAAQ,QAAQ;EACpC,IAAI,SAAS;GACX,IAAI,KAAK,IAAI,SAAS;GACtB,IAAI,UAAU,IAAI,SAAS;EAC7B;EACA,IAAI,YACF,IAAI,UAAU,IAAI,SAAS;EAE7B,WAAW,GAAG;EACd,QAAQ;CACV,GAAG;EAAC;EAAY;EAAS;CAAK,CAAC;CAG/B,sBAAsB;EACpB,aAAa;CACf,GAAG,CAAC,cAAc,QAAQ,CAAC;CAE3B,sBAAsB;EACpB,IAAI,SAAS,OACX,SAAS,MAAM,MAAM,WAAW;GAC9B,aAAa;EACf,CAAC;CAEL,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,qBAAC,OAAD;EACE,OAAO;EACP,SAAS,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,MAAM,GAAG,QAAQ;EACxD;EACC;EAMa;EACrB,MAAM,MAAM,KAAK,QAAQ,KAAK;EACzB;YAZP,CAcE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,GACxB,oBAAC,QAAD;GAAM,GAAG;GAAG,GAAG;GAAG,OAAO;GAAW,KAAK;GACtC;EACG,CAAA,CACH;;AAET"}
+{"version":3,"file":"TextFitter.js","names":[],"sources":["../../../../src/components/TextFitter/TextFitter.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport type { TextFitterProps } from './types.js'\n\nconst initialState = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n}\n\nexport const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({\n  children,\n  width = '100%',\n  height,\n  preserveAspectRatio = 'xMinYMid meet',\n  textStyle,\n  svgStyle,\n  cropTop,\n  cropBottom,\n  onFit,\n}) => {\n  const theme = useTheme()\n  const textRef = useRef<SVGTextElement>(null)\n  const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState)\n\n  const [ref] = useInView({\n    onChange(inView) {\n      if (inView) {\n        calculateBox()\n      }\n    },\n  })\n\n  const calculateBox = useCallback(() => {\n    if (!textRef.current) {\n      return\n    }\n    const box = textRef.current.getBBox()\n    if (cropTop) {\n      box.y += box.height * cropTop\n      box.height -= box.height * cropTop\n    }\n    if (cropBottom) {\n      box.height -= box.height * cropBottom\n    }\n    setViewBox(box)\n    onFit?.()\n  }, [cropBottom, cropTop, onFit])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when children changes\n  useLayoutEffect(() => {\n    calculateBox()\n  }, [calculateBox, children])\n\n  useLayoutEffect(() => {\n    if (document.fonts) {\n      document.fonts.ready.then(() => {\n        calculateBox()\n      })\n    }\n  }, [calculateBox])\n\n  return (\n    <svg\n      style={svgStyle}\n      viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}\n      width={width}\n      height={height}\n      // height={\n      //   textRect.height && maxHeight && textRect.height >= maxHeight\n      //     ? maxHeight\n      //     : height\n      // }\n      preserveAspectRatio={preserveAspectRatio}\n      fill={theme.vars.palette.text.primary}\n      ref={ref}\n    >\n      <title>{children}</title>\n      <text x={0} y={0} style={textStyle} ref={textRef}>\n        {children}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAMA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,OAAO;CACP,QAAQ;AACV;AAEA,MAAa,cAA4D,EACvE,UACA,QAAQ,QACR,QACA,sBAAsB,iBACtB,WACA,UACA,SACA,YACA,YACI;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA2B,YAAY;CAErE,MAAM,CAAC,OAAO,UAAU,EACtB,SAAS,QAAQ;EACf,IAAI,QACF,aAAa;CAEjB,EACF,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,CAAC,QAAQ,SACX;EAEF,MAAM,MAAM,QAAQ,QAAQ,QAAQ;EACpC,IAAI,SAAS;GACX,IAAI,KAAK,IAAI,SAAS;GACtB,IAAI,UAAU,IAAI,SAAS;EAC7B;EACA,IAAI,YACF,IAAI,UAAU,IAAI,SAAS;EAE7B,WAAW,GAAG;EACd,QAAQ;CACV,GAAG;EAAC;EAAY;EAAS;CAAK,CAAC;CAG/B,sBAAsB;EACpB,aAAa;CACf,GAAG,CAAC,cAAc,QAAQ,CAAC;CAE3B,sBAAsB;EACpB,IAAI,SAAS,OACX,SAAS,MAAM,MAAM,WAAW;GAC9B,aAAa;EACf,CAAC;CAEL,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,qBAAC,OAAD;EACE,OAAO;EACP,SAAS,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,MAAM,GAAG,QAAQ;EACxD;EACC;EAMa;EACrB,MAAM,MAAM,KAAK,QAAQ,KAAK;EACzB;EAZP,UAAA,CAcE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,GACxB,oBAAC,QAAD;GAAM,GAAG;GAAG,GAAG;GAAG,OAAO;GAAW,KAAK;GACtC;EACG,CAAA,CACH;;AAET"}

package/dist/esm/components/Timer/StepStatusTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepStatusTimer.js","names":[],"sources":["../../../../src/components/Timer/StepStatusTimer.tsx"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\nimport type React from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTimer } from '../../hooks/timer/useTimer.js'\nimport { formatTimer, getExpiryTimestamp } from '../../utils/timer.js'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\nimport {\n  CircularProgressPending,\n  ProgressFill,\n  ProgressTrack,\n  RingContainer,\n  StatusCircle,\n  TimerLabel,\n} from './StepStatusTimer.style.js'\n\ninterface TimerRingProps {\n  step?: LiFiStepExtended\n  size?: number\n  thickness?: number\n  showLabel?: boolean\n}\n\nexport const TimerRing: React.FC<TimerRingProps> = ({\n  step,\n  size = iconCircleSize,\n  thickness = 2,\n  showLabel = true,\n}) => {\n  const { i18n } = useTranslation()\n  const [isExpired, setExpired] = useState(false)\n\n  const signedAt = step?.execution?.signedAt\n  const totalDuration = (step?.estimate.executionDuration ?? 0) * 1000\n  const expiryTimestamp = getExpiryTimestamp(step)\n\n  const { days, hours, minutes, seconds } = useTimer({\n    autoStart: Boolean(signedAt),\n    expiryTimestamp,\n    onExpire: () => setExpired(true),\n  })\n\n  const hasActiveCountdown =\n    Boolean(signedAt) && !isExpired && (Boolean(minutes) || Boolean(seconds))\n\n  const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0)\n  const countdownProgress =\n    totalDuration > 0\n      ? Math.min(((totalDuration - remaining) / totalDuration) * 100, 100)\n      : 0\n\n  return (\n    <RingContainer sx={{ width: size, height: size }}>\n      <ProgressTrack\n        variant=\"determinate\"\n        value={100}\n        size={size}\n        thickness={thickness}\n      />\n      {hasActiveCountdown ? (\n        <ProgressFill\n          variant=\"determinate\"\n          value={countdownProgress}\n          size={size}\n          thickness={thickness}\n        />\n      ) : (\n        <CircularProgressPending size={size} thickness={thickness} />\n      )}\n      {showLabel && hasActiveCountdown ? (\n        <StatusCircle>\n          <TimerLabel>\n            {formatTimer({\n              locale: i18n.language,\n              days,\n              hours,\n              minutes,\n              seconds,\n            })}\n          </TimerLabel>\n        </StatusCircle>\n      ) : null}\n    </RingContainer>\n  )\n}\n"],"mappings":";;;;;;;AAuBA,MAAa,aAAuC,EAClD,MACA,OAAA,IACA,YAAY,GACZ,YAAY,WACR;CACJ,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,CAAC,WAAW,cAAc,SAAS,KAAK;CAE9C,MAAM,WAAW,MAAM,WAAW;CAClC,MAAM,iBAAiB,MAAM,SAAS,qBAAqB,KAAK;CAChE,MAAM,kBAAkB,mBAAmB,IAAI;CAE/C,MAAM,EAAE,MAAM,OAAO,SAAS,YAAY,SAAS;EACjD,WAAW,QAAQ,QAAQ;EAC3B;EACA,gBAAgB,WAAW,IAAI;CACjC,CAAC;CAED,MAAM,qBACJ,QAAQ,QAAQ,KAAK,CAAC,cAAc,QAAQ,OAAO,KAAK,QAAQ,OAAO;CAEzE,MAAM,YAAY,KAAK,IAAI,gBAAgB,QAAQ,IAAI,KAAK,IAAI,GAAG,CAAC;CACpE,MAAM,oBACJ,gBAAgB,IACZ,KAAK,KAAM,gBAAgB,aAAa,gBAAiB,KAAK,GAAG,IACjE;CAEN,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,OAAO;GAAM,QAAQ;EAAK;YAA/C;GACE,oBAAC,eAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA;GACA,qBACC,oBAAC,cAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA,IAED,oBAAC,yBAAD;IAA+B;IAAiB;GAAY,CAAA;GAE7D,aAAa,qBACZ,oBAAC,cAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UACG,YAAY;IACX,QAAQ,KAAK;IACb;IACA;IACA;IACA;GACF,CAAC,EACS,CAAA,EACA,CAAA,IACZ;EACS;;AAEnB"}
+{"version":3,"file":"StepStatusTimer.js","names":[],"sources":["../../../../src/components/Timer/StepStatusTimer.tsx"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\nimport type React from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTimer } from '../../hooks/timer/useTimer.js'\nimport { formatTimer, getExpiryTimestamp } from '../../utils/timer.js'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\nimport {\n  CircularProgressPending,\n  ProgressFill,\n  ProgressTrack,\n  RingContainer,\n  StatusCircle,\n  TimerLabel,\n} from './StepStatusTimer.style.js'\n\ninterface TimerRingProps {\n  step?: LiFiStepExtended\n  size?: number\n  thickness?: number\n  showLabel?: boolean\n}\n\nexport const TimerRing: React.FC<TimerRingProps> = ({\n  step,\n  size = iconCircleSize,\n  thickness = 2,\n  showLabel = true,\n}) => {\n  const { i18n } = useTranslation()\n  const [isExpired, setExpired] = useState(false)\n\n  const signedAt = step?.execution?.signedAt\n  const totalDuration = (step?.estimate.executionDuration ?? 0) * 1000\n  const expiryTimestamp = getExpiryTimestamp(step)\n\n  const { days, hours, minutes, seconds } = useTimer({\n    autoStart: Boolean(signedAt),\n    expiryTimestamp,\n    onExpire: () => setExpired(true),\n  })\n\n  const hasActiveCountdown =\n    Boolean(signedAt) && !isExpired && (Boolean(minutes) || Boolean(seconds))\n\n  const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0)\n  const countdownProgress =\n    totalDuration > 0\n      ? Math.min(((totalDuration - remaining) / totalDuration) * 100, 100)\n      : 0\n\n  return (\n    <RingContainer sx={{ width: size, height: size }}>\n      <ProgressTrack\n        variant=\"determinate\"\n        value={100}\n        size={size}\n        thickness={thickness}\n      />\n      {hasActiveCountdown ? (\n        <ProgressFill\n          variant=\"determinate\"\n          value={countdownProgress}\n          size={size}\n          thickness={thickness}\n        />\n      ) : (\n        <CircularProgressPending size={size} thickness={thickness} />\n      )}\n      {showLabel && hasActiveCountdown ? (\n        <StatusCircle>\n          <TimerLabel>\n            {formatTimer({\n              locale: i18n.language,\n              days,\n              hours,\n              minutes,\n              seconds,\n            })}\n          </TimerLabel>\n        </StatusCircle>\n      ) : null}\n    </RingContainer>\n  )\n}\n"],"mappings":";;;;;;;AAuBA,MAAa,aAAuC,EAClD,MACA,OAAA,IACA,YAAY,GACZ,YAAY,WACR;CACJ,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,CAAC,WAAW,cAAc,SAAS,KAAK;CAE9C,MAAM,WAAW,MAAM,WAAW;CAClC,MAAM,iBAAiB,MAAM,SAAS,qBAAqB,KAAK;CAChE,MAAM,kBAAkB,mBAAmB,IAAI;CAE/C,MAAM,EAAE,MAAM,OAAO,SAAS,YAAY,SAAS;EACjD,WAAW,QAAQ,QAAQ;EAC3B;EACA,gBAAgB,WAAW,IAAI;CACjC,CAAC;CAED,MAAM,qBACJ,QAAQ,QAAQ,KAAK,CAAC,cAAc,QAAQ,OAAO,KAAK,QAAQ,OAAO;CAEzE,MAAM,YAAY,KAAK,IAAI,gBAAgB,QAAQ,IAAI,KAAK,IAAI,GAAG,CAAC;CACpE,MAAM,oBACJ,gBAAgB,IACZ,KAAK,KAAM,gBAAgB,aAAa,gBAAiB,KAAK,GAAG,IACjE;CAEN,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,OAAO;GAAM,QAAQ;EAAK;EAA/C,UAAA;GACE,oBAAC,eAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA;GACA,qBACC,oBAAC,cAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA,IAED,oBAAC,yBAAD;IAA+B;IAAiB;GAAY,CAAA;GAE7D,aAAa,qBACZ,oBAAC,cAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UACG,YAAY;IACX,QAAQ,KAAK;IACb;IACA;IACA;IACA;GACF,CAAC,EACS,CAAA,EACA,CAAA,IACZ;EACS;;AAEnB"}

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

@@ -0,0 +1,17 @@
+import { LiFiStep, TokenAmount } from "@lifi/sdk";
+import { FC } from "react";
+import { BoxProps } from "@mui/material";
+//#region src/components/Token/Token.d.ts
+interface TokenProps {
+  token: TokenAmount;
+  impactToken?: TokenAmount;
+  enableImpactTokenTooltip?: boolean;
+  step?: LiFiStep;
+  stepVisible?: boolean;
+  disableDescription?: boolean;
+  isLoading?: boolean;
+}
+declare const Token$1: FC<TokenProps & BoxProps>;
+//#endregion
+export { Token$1 as Token };
+//# sourceMappingURL=Token.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Token.d.ts","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"mappings":";;;;UAeU;EACR,OAAO;EACP,cAAc;EACd;EACA,OAAO;EACP;EACA;EACA;;cAGW,SAAO,GAAG,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n  token: TokenAmount\n  impactToken?: TokenAmount\n  enableImpactTokenTooltip?: boolean\n  step?: LiFiStep\n  stepVisible?: boolean\n  disableDescription?: boolean\n  isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n  if (!token.priceUSD || !token.logoURI) {\n    return <TokenFallback token={token} {...other} />\n  }\n  return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n  token,\n  isLoading,\n  ...other\n}) => {\n  const { token: chainToken, isLoading: isLoadingToken } = useToken(\n    token.chainId,\n    token.address\n  )\n\n  return (\n    <TokenBase\n      token={{ ...token, ...chainToken } as TokenAmount}\n      isLoading={isLoading || isLoadingToken}\n      {...other}\n    />\n  )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n  token,\n  impactToken,\n  enableImpactTokenTooltip,\n  step,\n  stepVisible,\n  disableDescription,\n  isLoading,\n  ...other\n}) => {\n  const { t, i18n } = useTranslation()\n  const { chain } = useChain(token?.chainId)\n\n  if (isLoading) {\n    return (\n      <TokenSkeleton\n        token={token}\n        step={step}\n        disableDescription={disableDescription}\n        {...other}\n      />\n    )\n  }\n\n  const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n  const tokenPrice = formatTokenPrice(\n    token.amount,\n    token.priceUSD,\n    token.decimals\n  )\n\n  let priceImpact: number | undefined\n  let priceImpactPercent: number | undefined\n  if (impactToken) {\n    priceImpact = getPriceImpact({\n      fromToken: impactToken,\n      fromAmount: impactToken.amount,\n      toToken: token,\n      toAmount: token.amount,\n    })\n    priceImpactPercent = priceImpact * 100\n  }\n\n  const tokenOnChain = !disableDescription ? (\n    <TextSecondary>\n      {t('main.tokenOnChain', {\n        tokenSymbol: token.symbol,\n        chainName: chain?.name,\n      })}\n    </TextSecondary>\n  ) : null\n\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n          display: 'flex',\n          alignItems: 'center',\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <TokenAvatar\n        token={token}\n        chain={chain}\n        isLoading={isLoading}\n        sx={{ marginRight: 2 }}\n      />\n      <Box\n        sx={{\n          flex: 1,\n        }}\n      >\n        <Box\n          sx={{\n            mb: 0.5,\n            height: 24,\n            display: 'flex',\n            alignItems: 'center',\n          }}\n          title={tokenAmount}\n        >\n          <TextFitter\n            height={30}\n            textStyle={{\n              fontWeight: 700,\n            }}\n          >\n            {t('format.tokenAmount', {\n              value: tokenAmount,\n            })}\n          </TextFitter>\n        </Box>\n        <TextSecondaryContainer>\n          <TextSecondary>\n            {t('format.currency', {\n              value: tokenPrice,\n            })}\n          </TextSecondary>\n          {impactToken ? (\n            <TextSecondary sx={{ px: 0.5 }} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {impactToken ? (\n            enableImpactTokenTooltip ? (\n              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n                <TextSecondary>\n                  {t('format.percent', {\n                    value: priceImpact,\n                    usePlusSign: true,\n                  })}\n                </TextSecondary>\n              </Tooltip>\n            ) : (\n              <TextSecondary\n                title={priceImpactPercent?.toLocaleString(i18n.language, {\n                  maximumFractionDigits: 9,\n                })}\n              >\n                {t('format.percent', { value: priceImpact, usePlusSign: true })}\n              </TextSecondary>\n            )\n          ) : null}\n          {!disableDescription ? (\n            <TextSecondary sx={{ px: 0.5 }} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {!disableDescription && step ? (\n            <TokenStep\n              step={step}\n              stepVisible={stepVisible}\n              disableDescription={disableDescription}\n            >\n              {tokenOnChain}\n            </TokenStep>\n          ) : (\n            tokenOnChain\n          )}\n        </TextSecondaryContainer>\n      </Box>\n    </Box>\n  )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n  step,\n  stepVisible,\n  disableDescription,\n  children,\n}) => {\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        position: 'relative',\n        overflow: 'hidden',\n        height: 16,\n      }}\n    >\n      <Grow\n        in={!stepVisible && !disableDescription}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          {children as ReactElement}\n        </Box>\n      </Grow>\n      <Grow\n        in={stepVisible}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          <Box\n            sx={{\n              mr: 0.75,\n              height: 16,\n            }}\n          >\n            <SmallAvatar\n              src={step?.toolDetails.logoURI}\n              alt={step?.toolDetails.name}\n            >\n              {step?.toolDetails.name[0]}\n            </SmallAvatar>\n          </Box>\n          <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n        </Box>\n      </Grow>\n    </Box>\n  )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n  step,\n  disableDescription,\n  ...other\n}) => {\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n        }}\n      >\n        <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n        <Box\n          sx={{\n            flex: 1,\n          }}\n        >\n          <Skeleton width={112} height={28} variant=\"text\" />\n          <TextSecondaryContainer>\n            <Skeleton\n              width={48}\n              height={12}\n              variant=\"rounded\"\n              sx={{ marginTop: 0.5 }}\n            />\n            {!step && !disableDescription ? (\n              <Skeleton\n                width={96}\n                height={12}\n                variant=\"rounded\"\n                sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n              />\n            ) : null}\n          </TextSecondaryContainer>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Token.js","names":[],"sources":["../../../../src/components/Token/Token.tsx"],"sourcesContent":["import type { LiFiStep, TokenAmount } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Grow, Skeleton, Tooltip } from '@mui/material'\nimport type { FC, PropsWithChildren, ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { TextFitter } from '../TextFitter/TextFitter.js'\nimport { TextSecondary, TextSecondaryContainer } from './Token.style.js'\n\ninterface TokenProps {\n  token: TokenAmount\n  impactToken?: TokenAmount\n  enableImpactTokenTooltip?: boolean\n  step?: LiFiStep\n  stepVisible?: boolean\n  disableDescription?: boolean\n  isLoading?: boolean\n}\n\nexport const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {\n  if (!token.priceUSD || !token.logoURI) {\n    return <TokenFallback token={token} {...other} />\n  }\n  return <TokenBase token={token} {...other} />\n}\n\nconst TokenFallback: FC<TokenProps & BoxProps> = ({\n  token,\n  isLoading,\n  ...other\n}) => {\n  const { token: chainToken, isLoading: isLoadingToken } = useToken(\n    token.chainId,\n    token.address\n  )\n\n  return (\n    <TokenBase\n      token={{ ...token, ...chainToken } as TokenAmount}\n      isLoading={isLoading || isLoadingToken}\n      {...other}\n    />\n  )\n}\n\nconst TokenBase: FC<TokenProps & BoxProps> = ({\n  token,\n  impactToken,\n  enableImpactTokenTooltip,\n  step,\n  stepVisible,\n  disableDescription,\n  isLoading,\n  ...other\n}) => {\n  const { t, i18n } = useTranslation()\n  const { chain } = useChain(token?.chainId)\n\n  if (isLoading) {\n    return (\n      <TokenSkeleton\n        token={token}\n        step={step}\n        disableDescription={disableDescription}\n        {...other}\n      />\n    )\n  }\n\n  const tokenAmount = formatTokenAmount(token.amount, token.decimals)\n  const tokenPrice = formatTokenPrice(\n    token.amount,\n    token.priceUSD,\n    token.decimals\n  )\n\n  let priceImpact: number | undefined\n  let priceImpactPercent: number | undefined\n  if (impactToken) {\n    priceImpact = getPriceImpact({\n      fromToken: impactToken,\n      fromAmount: impactToken.amount,\n      toToken: token,\n      toAmount: token.amount,\n    })\n    priceImpactPercent = priceImpact * 100\n  }\n\n  const tokenOnChain = !disableDescription ? (\n    <TextSecondary>\n      {t('main.tokenOnChain', {\n        tokenSymbol: token.symbol,\n        chainName: chain?.name,\n      })}\n    </TextSecondary>\n  ) : null\n\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n          display: 'flex',\n          alignItems: 'center',\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <TokenAvatar\n        token={token}\n        chain={chain}\n        isLoading={isLoading}\n        sx={{ marginRight: 2 }}\n      />\n      <Box\n        sx={{\n          flex: 1,\n        }}\n      >\n        <Box\n          sx={{\n            mb: 0.5,\n            height: 24,\n            display: 'flex',\n            alignItems: 'center',\n          }}\n          title={tokenAmount}\n        >\n          <TextFitter\n            height={30}\n            textStyle={{\n              fontWeight: 700,\n            }}\n          >\n            {t('format.tokenAmount', {\n              value: tokenAmount,\n            })}\n          </TextFitter>\n        </Box>\n        <TextSecondaryContainer>\n          <TextSecondary>\n            {t('format.currency', {\n              value: tokenPrice,\n            })}\n          </TextSecondary>\n          {impactToken ? (\n            <TextSecondary sx={{ px: 0.5 }} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {impactToken ? (\n            enableImpactTokenTooltip ? (\n              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>\n                <TextSecondary>\n                  {t('format.percent', {\n                    value: priceImpact,\n                    usePlusSign: true,\n                  })}\n                </TextSecondary>\n              </Tooltip>\n            ) : (\n              <TextSecondary\n                title={priceImpactPercent?.toLocaleString(i18n.language, {\n                  maximumFractionDigits: 9,\n                })}\n              >\n                {t('format.percent', { value: priceImpact, usePlusSign: true })}\n              </TextSecondary>\n            )\n          ) : null}\n          {!disableDescription ? (\n            <TextSecondary sx={{ px: 0.5 }} dot>\n              &#x2022;\n            </TextSecondary>\n          ) : null}\n          {!disableDescription && step ? (\n            <TokenStep\n              step={step}\n              stepVisible={stepVisible}\n              disableDescription={disableDescription}\n            >\n              {tokenOnChain}\n            </TokenStep>\n          ) : (\n            tokenOnChain\n          )}\n        </TextSecondaryContainer>\n      </Box>\n    </Box>\n  )\n}\n\nconst TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({\n  step,\n  stepVisible,\n  disableDescription,\n  children,\n}) => {\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        position: 'relative',\n        overflow: 'hidden',\n        height: 16,\n      }}\n    >\n      <Grow\n        in={!stepVisible && !disableDescription}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          {children as ReactElement}\n        </Box>\n      </Grow>\n      <Grow\n        in={stepVisible}\n        style={{\n          position: 'absolute',\n        }}\n        appear={false}\n        timeout={225}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            height: 16,\n          }}\n        >\n          <Box\n            sx={{\n              mr: 0.75,\n              height: 16,\n            }}\n          >\n            <SmallAvatar\n              src={step?.toolDetails.logoURI}\n              alt={step?.toolDetails.name}\n            >\n              {step?.toolDetails.name[0]}\n            </SmallAvatar>\n          </Box>\n          <TextSecondary>{step?.toolDetails.name}</TextSecondary>\n        </Box>\n      </Grow>\n    </Box>\n  )\n}\n\nexport const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({\n  step,\n  disableDescription,\n  ...other\n}) => {\n  return (\n    <Box\n      {...other}\n      sx={[\n        {\n          flex: 1,\n        },\n        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),\n      ]}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n        }}\n      >\n        <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />\n        <Box\n          sx={{\n            flex: 1,\n          }}\n        >\n          <Skeleton width={112} height={28} variant=\"text\" />\n          <TextSecondaryContainer>\n            <Skeleton\n              width={48}\n              height={12}\n              variant=\"rounded\"\n              sx={{ marginTop: 0.5 }}\n            />\n            {!step && !disableDescription ? (\n              <Skeleton\n                width={96}\n                height={12}\n                variant=\"rounded\"\n                sx={{ marginTop: 0.5, marginLeft: 1.5 }}\n              />\n            ) : null}\n          </TextSecondaryContainer>\n        </Box>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/PinTokenButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinTokenButton.js","names":[],"sources":["../../../../src/components/TokenList/PinTokenButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { usePinnedTokensStore } from '../../stores/pinnedTokens/PinnedTokensStore.js'\n\ninterface PinTokenButtonProps {\n  chainId: number\n  tokenAddress: string\n}\n\nexport const PinTokenButton = ({\n  chainId,\n  tokenAddress,\n}: PinTokenButtonProps): JSX.Element => {\n  const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [\n    state.pinnedTokens,\n    state.pinToken,\n    state.unpinToken,\n  ])\n\n  const isPinned =\n    pinnedTokens[chainId]?.includes(tokenAddress.toLowerCase()) ?? false\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    ;(e.currentTarget as HTMLElement).blur()\n    if (isPinned) {\n      unpinToken(chainId, tokenAddress)\n    } else {\n      pinToken(chainId, tokenAddress)\n    }\n  }\n\n  const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n\n  return (\n    <IconButton\n      sx={{ width: 20, height: 20 }}\n      size=\"small\"\n      onClick={handleClick}\n    >\n      <PinIcon\n        sx={{\n          fontSize: 12,\n          color: isPinned ? 'text.primary' : 'text.secondary',\n        }}\n      />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,SACA,mBACsC;CACtC,MAAM,CAAC,cAAc,UAAU,cAAc,sBAAsB,UAAU;EAC3E,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CAED,MAAM,WACJ,aAAa,QAAQ,EAAE,SAAS,aAAa,YAAY,CAAC,KAAK;CAEjE,MAAM,eAAe,MAAwB;EAC3C,EAAE,gBAAgB;EACjB,EAAG,cAA8B,KAAK;EACvC,IAAI,UACF,WAAW,SAAS,YAAY;OAEhC,SAAS,SAAS,YAAY;CAElC;CAIA,OACE,oBAAC,YAAD;EACE,IAAI;GAAE,OAAO;GAAI,QAAQ;EAAG;EAC5B,MAAK;EACL,SAAS;YAET,oBARY,WAAW,cAAc,qBAQrC,EACE,IAAI;GACF,UAAU;GACV,OAAO,WAAW,iBAAiB;EACrC,EACD,CAAA;CACS,CAAA;AAEhB"}
+{"version":3,"file":"PinTokenButton.js","names":[],"sources":["../../../../src/components/TokenList/PinTokenButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { usePinnedTokensStore } from '../../stores/pinnedTokens/PinnedTokensStore.js'\n\ninterface PinTokenButtonProps {\n  chainId: number\n  tokenAddress: string\n}\n\nexport const PinTokenButton = ({\n  chainId,\n  tokenAddress,\n}: PinTokenButtonProps): JSX.Element => {\n  const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [\n    state.pinnedTokens,\n    state.pinToken,\n    state.unpinToken,\n  ])\n\n  const isPinned =\n    pinnedTokens[chainId]?.includes(tokenAddress.toLowerCase()) ?? false\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    ;(e.currentTarget as HTMLElement).blur()\n    if (isPinned) {\n      unpinToken(chainId, tokenAddress)\n    } else {\n      pinToken(chainId, tokenAddress)\n    }\n  }\n\n  const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n\n  return (\n    <IconButton\n      sx={{ width: 20, height: 20 }}\n      size=\"small\"\n      onClick={handleClick}\n    >\n      <PinIcon\n        sx={{\n          fontSize: 12,\n          color: isPinned ? 'text.primary' : 'text.secondary',\n        }}\n      />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,SACA,mBACsC;CACtC,MAAM,CAAC,cAAc,UAAU,cAAc,sBAAsB,UAAU;EAC3E,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CAED,MAAM,WACJ,aAAa,QAAQ,EAAE,SAAS,aAAa,YAAY,CAAC,KAAK;CAEjE,MAAM,eAAe,MAAwB;EAC3C,EAAE,gBAAgB;EACjB,EAAG,cAA8B,KAAK;EACvC,IAAI,UACF,WAAW,SAAS,YAAY;OAEhC,SAAS,SAAS,YAAY;CAElC;CAIA,OACE,oBAAC,YAAD;EACE,IAAI;GAAE,OAAO;GAAI,QAAQ;EAAG;EAC5B,MAAK;EACL,SAAS;EAET,UAAA,oBARY,WAAW,cAAc,qBAQrC,EACE,IAAI;GACF,UAAU;GACV,OAAO,WAAW,iBAAiB;EACrC,EACD,CAAA;CACS,CAAA;AAEhB"}

package/dist/esm/components/TokenList/TokenDetailsSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type { JSX, Ref } from 'react'\nimport { useImperativeHandle, useRef, useState } from 'react'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet = ({\n  ref,\n}: {\n  ref?: Ref<TokenDetailsSheetBase>\n}): JSX.Element => {\n  const bottomSheetRef = useRef<BottomSheetBase>(null)\n  const [tokenAddress, setTokenAddress] = useState<string | undefined>(\n    undefined\n  )\n  const [chainId, setChainId] = useState<number | undefined>(undefined)\n  const [withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => bottomSheetRef.current?.isOpen(),\n      open: (address: string, noContractAddress: boolean, chainId: number) => {\n        setTokenAddress(address)\n        setWithoutContractAddress(noContractAddress)\n        setChainId(chainId)\n        bottomSheetRef.current?.open()\n      },\n      close: () => {\n        bottomSheetRef.current?.close()\n      },\n    }),\n    []\n  )\n\n  return (\n    <BottomSheet ref={bottomSheetRef} keepMounted>\n      <TokenDetailsSheetContent\n        onClose={() => bottomSheetRef.current?.close()}\n        tokenAddress={tokenAddress}\n        withoutContractAddress={withoutContractAddress}\n        chainId={chainId}\n      />\n    </BottomSheet>\n  )\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,EAChC,UAGiB;CACjB,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,cAAc,mBAAmB,SACtC,KAAA,CACF;CACA,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,CAAS;CACpE,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,SAAiB,mBAA4B,YAAoB;GACtE,gBAAgB,OAAO;GACvB,0BAA0B,iBAAiB;GAC3C,WAAW,OAAO;GAClB,eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;YAChC,oBAAC,0BAAD;GACE,eAAe,eAAe,SAAS,MAAM;GAC/B;GACU;GACf;EACV,CAAA;CACU,CAAA;AAEjB"}
+{"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type { JSX, Ref } from 'react'\nimport { useImperativeHandle, useRef, useState } from 'react'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet = ({\n  ref,\n}: {\n  ref?: Ref<TokenDetailsSheetBase>\n}): JSX.Element => {\n  const bottomSheetRef = useRef<BottomSheetBase>(null)\n  const [tokenAddress, setTokenAddress] = useState<string | undefined>(\n    undefined\n  )\n  const [chainId, setChainId] = useState<number | undefined>(undefined)\n  const [withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => bottomSheetRef.current?.isOpen(),\n      open: (address: string, noContractAddress: boolean, chainId: number) => {\n        setTokenAddress(address)\n        setWithoutContractAddress(noContractAddress)\n        setChainId(chainId)\n        bottomSheetRef.current?.open()\n      },\n      close: () => {\n        bottomSheetRef.current?.close()\n      },\n    }),\n    []\n  )\n\n  return (\n    <BottomSheet ref={bottomSheetRef} keepMounted>\n      <TokenDetailsSheetContent\n        onClose={() => bottomSheetRef.current?.close()}\n        tokenAddress={tokenAddress}\n        withoutContractAddress={withoutContractAddress}\n        chainId={chainId}\n      />\n    </BottomSheet>\n  )\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,EAChC,UAGiB;CACjB,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,cAAc,mBAAmB,SACtC,KAAA,CACF;CACA,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,CAAS;CACpE,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,SAAiB,mBAA4B,YAAoB;GACtE,gBAAgB,OAAO;GACvB,0BAA0B,iBAAiB;GAC3C,WAAW,OAAO;GAClB,eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;EAChC,UAAA,oBAAC,0BAAD;GACE,eAAe,eAAe,SAAS,MAAM;GAC/B;GACU;GACf;EACV,CAAA;CACU,CAAA;AAEjB"}

package/dist/esm/components/TokenList/TokenDetailsSheetContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenDetailsSheetContent.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, type PropsWithChildren, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  Label,\n  MetricContainer,\n  TokenDetailsSheetContainer,\n  TokenDetailsSheetHeader,\n} from './TokenDetailsSheetContent.style.js'\n\ninterface TokenDetailsSheetContentProps {\n  tokenAddress: string | undefined\n  chainId: number | undefined\n  withoutContractAddress: boolean\n  onClose: () => void\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent = ({\n  tokenAddress,\n  chainId,\n  withoutContractAddress,\n  onClose,\n}: TokenDetailsSheetContentProps): JSX.Element => {\n  const { t } = useTranslation()\n  const { getAddressLink } = useExplorer()\n  const { getChainById } = useAvailableChains()\n\n  const { token, isLoading } = useToken(chainId, tokenAddress, true)\n  const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])\n\n  const copyContractAddress = async (e: React.MouseEvent) => {\n    e.stopPropagation()\n    try {\n      // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)\n      await navigator.clipboard.writeText(tokenAddress || '')\n    } catch {\n      // Silently fail to avoid crashing the UI if clipboard write fails\n    }\n  }\n\n  return (\n    <TokenDetailsSheetContainer>\n      <TokenDetailsSheetHeader>\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: 3,\n          }}\n        >\n          <TokenAvatar\n            token={token}\n            chain={chain}\n            tokenAvatarSize={72}\n            chainAvatarSize={28}\n            isLoading={isLoading}\n          />\n          <MetricContainer>\n            {isLoading ? (\n              <>\n                <Skeleton variant=\"rounded\" width={80} height={24} />\n                <Skeleton variant=\"rounded\" width={80} height={16} />\n              </>\n            ) : (\n              <>\n                <Typography\n                  sx={{\n                    fontWeight: 700,\n                    fontSize: '24px',\n                    lineHeight: '24px',\n                    color: 'text.primary',\n                  }}\n                >\n                  {token?.symbol || noDataLabel}\n                </Typography>\n                <Label>{token?.name || noDataLabel}</Label>\n              </>\n            )}\n          </MetricContainer>\n        </Box>\n        <IconButton\n          onClick={(e) => {\n            e.stopPropagation()\n            onClose()\n          }}\n          sx={{ mt: '-8px', mr: '-8px' }}\n        >\n          <Close />\n        </IconButton>\n      </TokenDetailsSheetHeader>\n      <MetricWithSkeleton\n        isLoading={isLoading}\n        label={t('tokenMetric.currentPrice')}\n        width={200}\n        height={40}\n      >\n        <Typography\n          sx={{\n            fontWeight: 700,\n            fontSize: '32px',\n            lineHeight: '40px',\n            color: 'text.primary',\n          }}\n        >\n          {token?.priceUSD\n            ? t('format.currency', {\n                value: token.priceUSD,\n              })\n            : noDataLabel}\n        </Typography>\n      </MetricWithSkeleton>\n      {!withoutContractAddress && (\n        <MetricWithSkeleton\n          isLoading={isLoading}\n          label={t('tokenMetric.contractAddress')}\n          width={200}\n          height={24}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              alignItems: 'center',\n              gap: 1,\n            }}\n          >\n            <Typography\n              sx={{\n                fontWeight: 700,\n                fontSize: '18px',\n                lineHeight: '24px',\n                color: 'text.primary',\n              }}\n            >\n              {shortenAddress(tokenAddress)}\n            </Typography>\n            {tokenAddress && (\n              <CardIconButton size=\"small\" onClick={copyContractAddress}>\n                <ContentCopyRounded fontSize=\"inherit\" />\n              </CardIconButton>\n            )}\n            {tokenAddress && (\n              <CardIconButton\n                size=\"small\"\n                LinkComponent={Link}\n                href={getAddressLink(tokenAddress, chainId)}\n                target=\"_blank\"\n                rel=\"nofollow noreferrer\"\n                onClick={(e) => e.stopPropagation()}\n              >\n                <OpenInNewRounded fontSize=\"inherit\" />\n              </CardIconButton>\n            )}\n          </Box>\n        </MetricWithSkeleton>\n      )}\n      <MetricWithSkeleton\n        isLoading={isLoading}\n        label={t('tokenMetric.marketCap')}\n        width={200}\n        height={24}\n      >\n        <Typography\n          sx={{\n            fontWeight: 700,\n            fontSize: '18px',\n            lineHeight: '24px',\n            color: 'text.primary',\n          }}\n        >\n          {token?.marketCapUSD\n            ? t('format.currency', {\n                value: token.marketCapUSD,\n                notation: 'compact',\n                compactDisplay: 'short',\n                maximumFractionDigits: 2,\n              })\n            : noDataLabel}\n        </Typography>\n      </MetricWithSkeleton>\n      <MetricWithSkeleton\n        isLoading={isLoading}\n        label={t('tokenMetric.volume24h')}\n        width={200}\n        height={24}\n      >\n        <Typography\n          sx={{\n            fontWeight: 700,\n            fontSize: '18px',\n            lineHeight: '24px',\n            color: 'text.primary',\n          }}\n        >\n          {token?.volumeUSD24H\n            ? t('format.currency', {\n                value: token.volumeUSD24H,\n                notation: 'compact',\n                compactDisplay: 'short',\n                maximumFractionDigits: 2,\n              })\n            : noDataLabel}\n        </Typography>\n      </MetricWithSkeleton>\n    </TokenDetailsSheetContainer>\n  )\n}\n\ninterface MetricWithSkeletonProps {\n  label: string\n  isLoading: boolean\n  width: number\n  height: number\n}\n\nconst MetricWithSkeleton = ({\n  label,\n  width,\n  height,\n  isLoading,\n  children,\n}: PropsWithChildren<MetricWithSkeletonProps>) => {\n  return (\n    <MetricContainer>\n      <Label>{label}</Label>\n      {isLoading ? (\n        <Skeleton variant=\"rounded\" width={width} height={height} />\n      ) : (\n        children\n      )}\n    </MetricContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TokenDetailsSheetContent.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, type PropsWithChildren, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  Label,\n  MetricContainer,\n  TokenDetailsSheetContainer,\n  TokenDetailsSheetHeader,\n} from './TokenDetailsSheetContent.style.js'\n\ninterface TokenDetailsSheetContentProps {\n  tokenAddress: string | undefined\n  chainId: number | undefined\n  withoutContractAddress: boolean\n  onClose: () => void\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent = ({\n  tokenAddress,\n  chainId,\n  withoutContractAddress,\n  onClose,\n}: TokenDetailsSheetContentProps): JSX.Element => {\n  const { t } = useTranslation()\n  const { getAddressLink } = useExplorer()\n  const { getChainById } = useAvailableChains()\n\n  const { token, isLoading } = useToken(chainId, tokenAddress, true)\n  const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])\n\n  const copyContractAddress = async (e: React.MouseEvent) => {\n    e.stopPropagation()\n    try {\n      // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)\n      await navigator.clipboard.writeText(tokenAddress || '')\n    } catch {\n      // Silently fail to avoid crashing the UI if clipboard write fails\n    }\n  }\n\n  return (\n    <TokenDetailsSheetContainer>\n      <TokenDetailsSheetHeader>\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: 3,\n          }}\n        >\n          <TokenAvatar\n            token={token}\n            chain={chain}\n            tokenAvatarSize={72}\n            chainAvatarSize={28}\n            isLoading={isLoading}\n          />\n          <MetricContainer>\n            {isLoading ? (\n              <>\n                <Skeleton variant=\"rounded\" width={80} height={24} />\n                <Skeleton variant=\"rounded\" width={80} height={16} />\n              </>\n            ) : (\n              <>\n                <Typography\n                  sx={{\n                    fontWeight: 700,\n                    fontSize: '24px',\n                    lineHeight: '24px',\n                    color: 'text.primary',\n                  }}\n                >\n                  {token?.symbol || noDataLabel}\n                </Typography>\n                <Label>{token?.name || noDataLabel}</Label>\n              </>\n            )}\n          </MetricContainer>\n        </Box>\n        <IconButton\n          onClick={(e) => {\n            e.stopPropagation()\n            onClose()\n          }}\n          sx={{ mt: '-8px', mr: '-8px' }}\n        >\n          <Close />\n        </IconButton>\n      </TokenDetailsSheetHeader>\n      <MetricWithSkeleton\n        isLoading={isLoading}\n        label={t('tokenMetric.currentPrice')}\n        width={200}\n        height={40}\n      >\n        <Typography\n          sx={{\n            fontWeight: 700,\n            fontSize: '32px',\n            lineHeight: '40px',\n            color: 'text.primary',\n          }}\n        >\n          {token?.priceUSD\n            ? t('format.currency', {\n                value: token.priceUSD,\n              })\n            : noDataLabel}\n        </Typography>\n      </MetricWithSkeleton>\n      {!withoutContractAddress && (\n        <MetricWithSkeleton\n          isLoading={isLoading}\n          label={t('tokenMetric.contractAddress')}\n          width={200}\n          height={24}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              alignItems: 'center',\n              gap: 1,\n            }}\n          >\n            <Typography\n              sx={{\n                fontWeight: 700,\n                fontSize: '18px',\n                lineHeight: '24px',\n                color: 'text.primary',\n              }}\n            >\n              {shortenAddress(tokenAddress)}\n            </Typography>\n            {tokenAddress && (\n              <CardIconButton size=\"small\" onClick={copyContractAddress}>\n                <ContentCopyRounded fontSize=\"inherit\" />\n              </CardIconButton>\n            )}\n            {tokenAddress && (\n              <CardIconButton\n                size=\"small\"\n                LinkComponent={Link}\n                href={getAddressLink(tokenAddress, chainId)}\n                target=\"_blank\"\n                rel=\"nofollow noreferrer\"\n                onClick={(e) => e.stopPropagation()}\n              >\n                <OpenInNewRounded fontSize=\"inherit\" />\n              </CardIconButton>\n            )}\n          </Box>\n        </MetricWithSkeleton>\n      )}\n      <MetricWithSkeleton\n        isLoading={isLoading}\n        label={t('tokenMetric.marketCap')}\n        width={200}\n        height={24}\n      >\n        <Typography\n          sx={{\n            fontWeight: 700,\n            fontSize: '18px',\n            lineHeight: '24px',\n            color: 'text.primary',\n          }}\n        >\n          {token?.marketCapUSD\n            ? t('format.currency', {\n                value: token.marketCapUSD,\n                notation: 'compact',\n                compactDisplay: 'short',\n                maximumFractionDigits: 2,\n              })\n            : noDataLabel}\n        </Typography>\n      </MetricWithSkeleton>\n      <MetricWithSkeleton\n        isLoading={isLoading}\n        label={t('tokenMetric.volume24h')}\n        width={200}\n        height={24}\n      >\n        <Typography\n          sx={{\n            fontWeight: 700,\n            fontSize: '18px',\n            lineHeight: '24px',\n            color: 'text.primary',\n          }}\n        >\n          {token?.volumeUSD24H\n            ? t('format.currency', {\n                value: token.volumeUSD24H,\n                notation: 'compact',\n                compactDisplay: 'short',\n                maximumFractionDigits: 2,\n              })\n            : noDataLabel}\n        </Typography>\n      </MetricWithSkeleton>\n    </TokenDetailsSheetContainer>\n  )\n}\n\ninterface MetricWithSkeletonProps {\n  label: string\n  isLoading: boolean\n  width: number\n  height: number\n}\n\nconst MetricWithSkeleton = ({\n  label,\n  width,\n  height,\n  isLoading,\n  children,\n}: PropsWithChildren<MetricWithSkeletonProps>) => {\n  return (\n    <MetricContainer>\n      <Label>{label}</Label>\n      {isLoading ? (\n        <Skeleton variant=\"rounded\" width={width} height={height} />\n      ) : (\n        children\n      )}\n    </MetricContainer>\n  )\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TokenList.js","names":[],"sources":["../../../../src/components/TokenList/TokenList.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type FC, memo, useEffect, useRef } from 'react'\nimport { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useTokenBalances } from '../../hooks/useTokenBalances.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { TokenNotFound } from './TokenNotFound.js'\nimport type { TokenListProps } from './types.js'\nimport { useTokenSelect } from './useTokenSelect.js'\nimport { VirtualizedTokenList } from './VirtualizedTokenList.js'\n\nexport const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {\n  const navigateBack = useNavigateBack()\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { listHeight } = useListHeight({\n    listParentRef,\n    headerRef,\n  })\n\n  const emitter = useWidgetEvents()\n\n  const [selectedChainId, selectedTokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const isAllNetworks = useChainOrderStore(\n    (state) => state[`${formType}IsAllNetworks`]\n  )\n\n  const [tokenSearchFilter]: string[] = useDebouncedWatch(\n    320,\n    'tokenSearchFilter'\n  )\n\n  const {\n    tokens,\n    withCategories,\n    withPinnedTokens,\n    isTokensLoading,\n    isBalanceLoading,\n    isSearchLoading,\n  } = useTokenBalances(\n    selectedChainId,\n    formType,\n    isAllNetworks,\n    tokenSearchFilter\n  )\n\n  const handleTokenClick = useTokenSelect(formType, navigateBack)\n\n  const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks\n\n  useEffect(() => {\n    const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')\n    if (normalizedSearchFilter) {\n      emitter.emit(WidgetEvent.TokenSearch, {\n        value: normalizedSearchFilter,\n        tokens,\n      })\n    }\n  }, [tokenSearchFilter, tokens, emitter])\n\n  return (\n    <Box ref={listParentRef} style={{ height: listHeight, overflow: 'auto' }}>\n      {!tokens.length && !isTokensLoading && !isSearchLoading ? (\n        <TokenNotFound formType={formType} />\n      ) : null}\n      <VirtualizedTokenList\n        tokens={tokens}\n        scrollElementRef={listParentRef}\n        chainId={selectedChainId}\n        isLoading={isTokensLoading || isSearchLoading}\n        isBalanceLoading={isBalanceLoading}\n        showCategories={showCategories}\n        showPinnedTokens={withPinnedTokens}\n        onClick={handleTokenClick}\n        selectedTokenAddress={selectedTokenAddress}\n        isAllNetworks={isAllNetworks}\n      />\n    </Box>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,YAAgC,MAAM,EAAE,UAAU,gBAAgB;CAC7E,MAAM,eAAe,gBAAgB;CACrC,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,EAAE,eAAe,cAAc;EACnC;EACA;CACF,CAAC;CAED,MAAM,UAAU,gBAAgB;CAEhC,MAAM,CAAC,iBAAiB,wBAAwB,eAC9C,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,eAC/B;CAEA,MAAM,CAAC,qBAA+B,kBACpC,KACA,mBACF;CAEA,MAAM,EACJ,QACA,gBACA,kBACA,iBACA,kBACA,oBACE,iBACF,iBACA,UACA,eACA,iBACF;CAEA,MAAM,mBAAmB,eAAe,UAAU,YAAY;CAE9D,MAAM,iBAAiB,kBAAkB,CAAC,qBAAqB,CAAC;CAEhE,gBAAgB;EACd,MAAM,yBAAyB,mBAAmB,WAAW,KAAK,EAAE;EACpE,IAAI,wBACF,QAAQ,KAAA,eAA8B;GACpC,OAAO;GACP;EACF,CAAC;CAEL,GAAG;EAAC;EAAmB;EAAQ;CAAO,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK;EAAe,OAAO;GAAE,QAAQ;GAAY,UAAU;EAAO;YAAvE,CACG,CAAC,OAAO,UAAU,CAAC,mBAAmB,CAAC,kBACtC,oBAAC,eAAD,EAAyB,SAAW,CAAA,IAClC,MACJ,oBAAC,sBAAD;GACU;GACR,kBAAkB;GAClB,SAAS;GACT,WAAW,mBAAmB;GACZ;GACF;GAChB,kBAAkB;GAClB,SAAS;GACa;GACP;EAChB,CAAA,CACE;;AAET,CAAC"}
+{"version":3,"file":"TokenList.js","names":[],"sources":["../../../../src/components/TokenList/TokenList.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type FC, memo, useEffect, useRef } from 'react'\nimport { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useTokenBalances } from '../../hooks/useTokenBalances.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { TokenNotFound } from './TokenNotFound.js'\nimport type { TokenListProps } from './types.js'\nimport { useTokenSelect } from './useTokenSelect.js'\nimport { VirtualizedTokenList } from './VirtualizedTokenList.js'\n\nexport const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {\n  const navigateBack = useNavigateBack()\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { listHeight } = useListHeight({\n    listParentRef,\n    headerRef,\n  })\n\n  const emitter = useWidgetEvents()\n\n  const [selectedChainId, selectedTokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const isAllNetworks = useChainOrderStore(\n    (state) => state[`${formType}IsAllNetworks`]\n  )\n\n  const [tokenSearchFilter]: string[] = useDebouncedWatch(\n    320,\n    'tokenSearchFilter'\n  )\n\n  const {\n    tokens,\n    withCategories,\n    withPinnedTokens,\n    isTokensLoading,\n    isBalanceLoading,\n    isSearchLoading,\n  } = useTokenBalances(\n    selectedChainId,\n    formType,\n    isAllNetworks,\n    tokenSearchFilter\n  )\n\n  const handleTokenClick = useTokenSelect(formType, navigateBack)\n\n  const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks\n\n  useEffect(() => {\n    const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')\n    if (normalizedSearchFilter) {\n      emitter.emit(WidgetEvent.TokenSearch, {\n        value: normalizedSearchFilter,\n        tokens,\n      })\n    }\n  }, [tokenSearchFilter, tokens, emitter])\n\n  return (\n    <Box ref={listParentRef} style={{ height: listHeight, overflow: 'auto' }}>\n      {!tokens.length && !isTokensLoading && !isSearchLoading ? (\n        <TokenNotFound formType={formType} />\n      ) : null}\n      <VirtualizedTokenList\n        tokens={tokens}\n        scrollElementRef={listParentRef}\n        chainId={selectedChainId}\n        isLoading={isTokensLoading || isSearchLoading}\n        isBalanceLoading={isBalanceLoading}\n        showCategories={showCategories}\n        showPinnedTokens={withPinnedTokens}\n        onClick={handleTokenClick}\n        selectedTokenAddress={selectedTokenAddress}\n        isAllNetworks={isAllNetworks}\n      />\n    </Box>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,YAAgC,MAAM,EAAE,UAAU,gBAAgB;CAC7E,MAAM,eAAe,gBAAgB;CACrC,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,EAAE,eAAe,cAAc;EACnC;EACA;CACF,CAAC;CAED,MAAM,UAAU,gBAAgB;CAEhC,MAAM,CAAC,iBAAiB,wBAAwB,eAC9C,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,eAC/B;CAEA,MAAM,CAAC,qBAA+B,kBACpC,KACA,mBACF;CAEA,MAAM,EACJ,QACA,gBACA,kBACA,iBACA,kBACA,oBACE,iBACF,iBACA,UACA,eACA,iBACF;CAEA,MAAM,mBAAmB,eAAe,UAAU,YAAY;CAE9D,MAAM,iBAAiB,kBAAkB,CAAC,qBAAqB,CAAC;CAEhE,gBAAgB;EACd,MAAM,yBAAyB,mBAAmB,WAAW,KAAK,EAAE;EACpE,IAAI,wBACF,QAAQ,KAAA,eAA8B;GACpC,OAAO;GACP;EACF,CAAC;CAEL,GAAG;EAAC;EAAmB;EAAQ;CAAO,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK;EAAe,OAAO;GAAE,QAAQ;GAAY,UAAU;EAAO;EAAvE,UAAA,CACG,CAAC,OAAO,UAAU,CAAC,mBAAmB,CAAC,kBACtC,oBAAC,eAAD,EAAyB,SAAW,CAAA,IAClC,MACJ,oBAAC,sBAAD;GACU;GACR,kBAAkB;GAClB,SAAS;GACT,WAAW,mBAAmB;GACZ;GACF;GAChB,kBAAkB;GAClB,SAAS;GACa;GACP;EAChB,CAAA,CACE;;AAET,CAAC"}

package/dist/esm/components/TokenList/TokenListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","InfoOutlinedIcon","ListItemButton"],"sources":["../../../../src/components/TokenList/TokenListItem.tsx"],"sourcesContent":["import type { StaticToken } from '@lifi/sdk'\nimport { ChainType } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport {\n  Avatar,\n  Box,\n  ListItemAvatar,\n  ListItemText,\n  listItemSecondaryActionClasses,\n  Skeleton,\n  Slide,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport type { JSX, MouseEventHandler } from 'react'\nimport { memo, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLongPress } from '../../hooks/useLongPress.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { ListItemButton } from '../ListItem/ListItemButton.js'\nimport { PinTokenButton } from './PinTokenButton.js'\nimport { IconButton, ListItem } from './TokenList.style.js'\nimport type {\n  TokenListItemAvatarProps,\n  TokenListItemButtonProps,\n  TokenListItemProps,\n} from './types.js'\n\nexport const TokenListItem: React.FC<TokenListItemProps> = memo(\n  ({\n    onClick,\n    size,\n    start,\n    token,\n    chain,\n    isBalanceLoading,\n    startAdornment,\n    endAdornment,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    return (\n      <ListItem\n        style={{\n          height: `${size}px`,\n          transform: `translateY(${start}px)`,\n          padding: 0,\n        }}\n      >\n        {startAdornment}\n        <TokenListItemButton\n          token={token}\n          isBalanceLoading={isBalanceLoading}\n          onClick={onClick}\n          chain={chain}\n          selected={selected}\n          onShowTokenDetails={onShowTokenDetails}\n        />\n        {endAdornment}\n      </ListItem>\n    )\n  }\n)\n\nconst TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {\n  const [isImageLoading, setIsImageLoading] = useState(true)\n\n  return (\n    <Avatar\n      src={token.logoURI}\n      alt={token.symbol}\n      sx={(theme) =>\n        isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null\n      }\n      onLoad={() => setIsImageLoading(false)}\n    >\n      {token.symbol?.[0]}\n    </Avatar>\n  )\n})\n\ninterface OpenTokenDetailsButtonProps {\n  tokenAddress: string | undefined\n  withoutContractAddress: boolean\n  chainId: number\n  onClick: (\n    tokenAddress: string,\n    withoutContractAddress: boolean,\n    chainId: number\n  ) => void\n}\n\nconst OpenTokenDetailsButton = ({\n  tokenAddress,\n  withoutContractAddress,\n  chainId,\n  onClick,\n}: OpenTokenDetailsButtonProps) => {\n  if (!tokenAddress) {\n    return null\n  }\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={(e) => {\n        e.stopPropagation()\n        e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n        onClick(tokenAddress, withoutContractAddress, chainId)\n      }}\n    >\n      <InfoOutlinedIcon />\n    </IconButton>\n  )\n}\n\nconst TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(\n  ({\n    onClick,\n    token,\n    chain,\n    isBalanceLoading,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    const { t } = useTranslation()\n    const container = useRef(null)\n    const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)\n    const [showAddress, setShowAddress] = useState(false)\n\n    const withoutContractAddress = chain?.chainType === ChainType.UTXO\n\n    const onMouseEnter = () => {\n      timeoutId.current = setTimeout(() => {\n        if (token.address) {\n          setShowAddress(true)\n        }\n      }, 350)\n    }\n\n    const onMouseLeave = () => {\n      clearTimeout(timeoutId.current)\n      if (showAddress) {\n        setShowAddress(false)\n      }\n    }\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n      e.stopPropagation()\n      onClick?.(token.address, token.chainId)\n    }\n\n    const tokenAmount = useMemo(\n      () => formatTokenAmount(token.amount, token.decimals),\n      [token.amount, token.decimals]\n    )\n\n    const tokenPrice = useMemo(\n      () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),\n      [token.amount, token.priceUSD, token.decimals]\n    )\n\n    const longPressEvents = useLongPress(() =>\n      onShowTokenDetails(token.address, withoutContractAddress, token.chainId)\n    )\n\n    return (\n      <ListItemButton\n        onClick={handleClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...longPressEvents}\n        dense\n        selected={selected}\n        sx={{\n          height: 60,\n          marginBottom: '4px',\n        }}\n      >\n        <ListItemAvatar>\n          {chain ? (\n            <TokenAvatar\n              token={token as StaticToken}\n              chain={chain}\n              tokenAvatarSize={40}\n              chainAvatarSize={16}\n            />\n          ) : (\n            <TokenListItemAvatar token={token} />\n          )}\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n              {token.symbol}\n              {!token.verified && (\n                <Tooltip\n                  title={t('warning.message.unverifiedToken')}\n                  placement=\"top\"\n                  arrow\n                >\n                  <WarningRounded\n                    sx={{\n                      display: 'flex',\n                      fontSize: 16,\n                      color: 'warning.main',\n                      cursor: 'help',\n                    }}\n                  />\n                </Tooltip>\n              )}\n            </Box>\n          }\n          slotProps={{\n            secondary: {\n              component: 'div',\n            },\n          }}\n          secondary={\n            withoutContractAddress ? (\n              <Box\n                ref={container}\n                sx={{\n                  height: 20,\n                  display: 'flex',\n                }}\n              >\n                <Box\n                  sx={{\n                    pt: 0.25,\n                  }}\n                >\n                  {token.name}\n                </Box>\n                <Box\n                  sx={{\n                    position: 'relative',\n                  }}\n                >\n                  <Slide\n                    direction=\"up\"\n                    in={showAddress}\n                    container={container.current}\n                    style={{\n                      position: 'absolute',\n                    }}\n                    appear={false}\n                    mountOnEnter\n                  >\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                    </Box>\n                  </Slide>\n                </Box>\n              </Box>\n            ) : (\n              <Box\n                ref={container}\n                sx={{\n                  position: 'relative',\n                  height: 20,\n                }}\n              >\n                <Slide\n                  direction=\"down\"\n                  in={!showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                >\n                  <Box\n                    sx={{\n                      pt: 0.25,\n                    }}\n                  >\n                    {token.name}\n                  </Box>\n                </Slide>\n                <Slide\n                  direction=\"up\"\n                  in={showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                  mountOnEnter\n                >\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 0.5,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        pt: 0.125,\n                      }}\n                    >\n                      {shortenAddress(token.address)}\n                    </Box>\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                    </Box>\n                  </Box>\n                </Slide>\n              </Box>\n            )\n          }\n        />\n        {isBalanceLoading ? (\n          <TokenAmountSkeleton />\n        ) : (\n          <Box sx={{ textAlign: 'right' }}>\n            {token.amount ? (\n              <Typography\n                noWrap\n                sx={{\n                  fontWeight: 600,\n                }}\n                title={tokenAmount}\n              >\n                {t('format.tokenAmount', {\n                  value: tokenAmount,\n                })}\n              </Typography>\n            ) : null}\n            {token.amount && token.priceUSD ? (\n              <Typography\n                data-price={token.priceUSD}\n                sx={{\n                  fontWeight: 500,\n                  fontSize: 12,\n                  color: 'text.secondary',\n                }}\n              >\n                {t('format.currency', {\n                  value: tokenPrice,\n                })}\n              </Typography>\n            ) : null}\n          </Box>\n        )}\n      </ListItemButton>\n    )\n  }\n)\n\nexport const TokenListItemSkeleton = (): JSX.Element => {\n  return (\n    <ListItem\n      secondaryAction={<TokenAmountSkeleton />}\n      disablePadding\n      sx={(theme) => ({\n        position: 'relative',\n        flexDirection: 'row',\n        alignItems: 'center',\n        padding: 0,\n        [`& .${listItemSecondaryActionClasses.root}`]: {\n          right: theme.spacing(1.5),\n        },\n      })}\n    >\n      <ListItemAvatar>\n        <Skeleton\n          variant=\"circular\"\n          width={40}\n          height={40}\n          sx={{ marginLeft: 1.5, marginRight: 2 }}\n        />\n      </ListItemAvatar>\n      <ListItemText\n        primary={<Skeleton variant=\"text\" width={56} height={24} />}\n        secondary={<Skeleton variant=\"text\" width={96} height={16} />}\n      />\n    </ListItem>\n  )\n}\n\nconst TokenAmountSkeleton: React.FC = () => {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-end',\n      }}\n    >\n      <Skeleton variant=\"text\" width={56} height={24} />\n      <Skeleton variant=\"text\" width={48} height={16} />\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","InfoOutlinedIcon","ListItemButton"],"sources":["../../../../src/components/TokenList/TokenListItem.tsx"],"sourcesContent":["import type { StaticToken } from '@lifi/sdk'\nimport { ChainType } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport {\n  Avatar,\n  Box,\n  ListItemAvatar,\n  ListItemText,\n  listItemSecondaryActionClasses,\n  Skeleton,\n  Slide,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport type { JSX, MouseEventHandler } from 'react'\nimport { memo, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLongPress } from '../../hooks/useLongPress.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { ListItemButton } from '../ListItem/ListItemButton.js'\nimport { PinTokenButton } from './PinTokenButton.js'\nimport { IconButton, ListItem } from './TokenList.style.js'\nimport type {\n  TokenListItemAvatarProps,\n  TokenListItemButtonProps,\n  TokenListItemProps,\n} from './types.js'\n\nexport const TokenListItem: React.FC<TokenListItemProps> = memo(\n  ({\n    onClick,\n    size,\n    start,\n    token,\n    chain,\n    isBalanceLoading,\n    startAdornment,\n    endAdornment,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    return (\n      <ListItem\n        style={{\n          height: `${size}px`,\n          transform: `translateY(${start}px)`,\n          padding: 0,\n        }}\n      >\n        {startAdornment}\n        <TokenListItemButton\n          token={token}\n          isBalanceLoading={isBalanceLoading}\n          onClick={onClick}\n          chain={chain}\n          selected={selected}\n          onShowTokenDetails={onShowTokenDetails}\n        />\n        {endAdornment}\n      </ListItem>\n    )\n  }\n)\n\nconst TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {\n  const [isImageLoading, setIsImageLoading] = useState(true)\n\n  return (\n    <Avatar\n      src={token.logoURI}\n      alt={token.symbol}\n      sx={(theme) =>\n        isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null\n      }\n      onLoad={() => setIsImageLoading(false)}\n    >\n      {token.symbol?.[0]}\n    </Avatar>\n  )\n})\n\ninterface OpenTokenDetailsButtonProps {\n  tokenAddress: string | undefined\n  withoutContractAddress: boolean\n  chainId: number\n  onClick: (\n    tokenAddress: string,\n    withoutContractAddress: boolean,\n    chainId: number\n  ) => void\n}\n\nconst OpenTokenDetailsButton = ({\n  tokenAddress,\n  withoutContractAddress,\n  chainId,\n  onClick,\n}: OpenTokenDetailsButtonProps) => {\n  if (!tokenAddress) {\n    return null\n  }\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={(e) => {\n        e.stopPropagation()\n        e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n        onClick(tokenAddress, withoutContractAddress, chainId)\n      }}\n    >\n      <InfoOutlinedIcon />\n    </IconButton>\n  )\n}\n\nconst TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(\n  ({\n    onClick,\n    token,\n    chain,\n    isBalanceLoading,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    const { t } = useTranslation()\n    const container = useRef(null)\n    const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)\n    const [showAddress, setShowAddress] = useState(false)\n\n    const withoutContractAddress = chain?.chainType === ChainType.UTXO\n\n    const onMouseEnter = () => {\n      timeoutId.current = setTimeout(() => {\n        if (token.address) {\n          setShowAddress(true)\n        }\n      }, 350)\n    }\n\n    const onMouseLeave = () => {\n      clearTimeout(timeoutId.current)\n      if (showAddress) {\n        setShowAddress(false)\n      }\n    }\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n      e.stopPropagation()\n      onClick?.(token.address, token.chainId)\n    }\n\n    const tokenAmount = useMemo(\n      () => formatTokenAmount(token.amount, token.decimals),\n      [token.amount, token.decimals]\n    )\n\n    const tokenPrice = useMemo(\n      () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),\n      [token.amount, token.priceUSD, token.decimals]\n    )\n\n    const longPressEvents = useLongPress(() =>\n      onShowTokenDetails(token.address, withoutContractAddress, token.chainId)\n    )\n\n    return (\n      <ListItemButton\n        onClick={handleClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...longPressEvents}\n        dense\n        selected={selected}\n        sx={{\n          height: 60,\n          marginBottom: '4px',\n        }}\n      >\n        <ListItemAvatar>\n          {chain ? (\n            <TokenAvatar\n              token={token as StaticToken}\n              chain={chain}\n              tokenAvatarSize={40}\n              chainAvatarSize={16}\n            />\n          ) : (\n            <TokenListItemAvatar token={token} />\n          )}\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n              {token.symbol}\n              {!token.verified && (\n                <Tooltip\n                  title={t('warning.message.unverifiedToken')}\n                  placement=\"top\"\n                  arrow\n                >\n                  <WarningRounded\n                    sx={{\n                      display: 'flex',\n                      fontSize: 16,\n                      color: 'warning.main',\n                      cursor: 'help',\n                    }}\n                  />\n                </Tooltip>\n              )}\n            </Box>\n          }\n          slotProps={{\n            secondary: {\n              component: 'div',\n            },\n          }}\n          secondary={\n            withoutContractAddress ? (\n              <Box\n                ref={container}\n                sx={{\n                  height: 20,\n                  display: 'flex',\n                }}\n              >\n                <Box\n                  sx={{\n                    pt: 0.25,\n                  }}\n                >\n                  {token.name}\n                </Box>\n                <Box\n                  sx={{\n                    position: 'relative',\n                  }}\n                >\n                  <Slide\n                    direction=\"up\"\n                    in={showAddress}\n                    container={container.current}\n                    style={{\n                      position: 'absolute',\n                    }}\n                    appear={false}\n                    mountOnEnter\n                  >\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                    </Box>\n                  </Slide>\n                </Box>\n              </Box>\n            ) : (\n              <Box\n                ref={container}\n                sx={{\n                  position: 'relative',\n                  height: 20,\n                }}\n              >\n                <Slide\n                  direction=\"down\"\n                  in={!showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                >\n                  <Box\n                    sx={{\n                      pt: 0.25,\n                    }}\n                  >\n                    {token.name}\n                  </Box>\n                </Slide>\n                <Slide\n                  direction=\"up\"\n                  in={showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                  mountOnEnter\n                >\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 0.5,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        pt: 0.125,\n                      }}\n                    >\n                      {shortenAddress(token.address)}\n                    </Box>\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                    </Box>\n                  </Box>\n                </Slide>\n              </Box>\n            )\n          }\n        />\n        {isBalanceLoading ? (\n          <TokenAmountSkeleton />\n        ) : (\n          <Box sx={{ textAlign: 'right' }}>\n            {token.amount ? (\n              <Typography\n                noWrap\n                sx={{\n                  fontWeight: 600,\n                }}\n                title={tokenAmount}\n              >\n                {t('format.tokenAmount', {\n                  value: tokenAmount,\n                })}\n              </Typography>\n            ) : null}\n            {token.amount && token.priceUSD ? (\n              <Typography\n                data-price={token.priceUSD}\n                sx={{\n                  fontWeight: 500,\n                  fontSize: 12,\n                  color: 'text.secondary',\n                }}\n              >\n                {t('format.currency', {\n                  value: tokenPrice,\n                })}\n              </Typography>\n            ) : null}\n          </Box>\n        )}\n      </ListItemButton>\n    )\n  }\n)\n\nexport const TokenListItemSkeleton = (): JSX.Element => {\n  return (\n    <ListItem\n      secondaryAction={<TokenAmountSkeleton />}\n      disablePadding\n      sx={(theme) => ({\n        position: 'relative',\n        flexDirection: 'row',\n        alignItems: 'center',\n        padding: 0,\n        [`& .${listItemSecondaryActionClasses.root}`]: {\n          right: theme.spacing(1.5),\n        },\n      })}\n    >\n      <ListItemAvatar>\n        <Skeleton\n          variant=\"circular\"\n          width={40}\n          height={40}\n          sx={{ marginLeft: 1.5, marginRight: 2 }}\n        />\n      </ListItemAvatar>\n      <ListItemText\n        primary={<Skeleton variant=\"text\" width={56} height={24} />}\n        secondary={<Skeleton variant=\"text\" width={96} height={16} />}\n      />\n    </ListItem>\n  )\n}\n\nconst TokenAmountSkeleton: React.FC = () => {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-end',\n      }}\n    >\n      <Skeleton variant=\"text\" width={56} height={24} />\n      <Skeleton variant=\"text\" width={48} height={16} />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/TokenNotFound.d.ts

@@ -0,0 +1,6 @@
+import { FormTypeProps } from "../../stores/form/types.js";
+//#region src/components/TokenList/TokenNotFound.d.ts
+declare const TokenNotFound: React.FC<FormTypeProps>;
+//#endregion
+export { TokenNotFound };
+//# sourceMappingURL=TokenNotFound.d.ts.map

package/dist/esm/components/TokenList/TokenNotFound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenNotFound.d.ts","names":[],"sources":["../../../../src/components/TokenList/TokenNotFound.tsx"],"mappings":";;cAIa,eAAe,MAAM,GAAG"}

package/dist/esm/components/TokenList/VirtualizedTokenList.d.ts

@@ -0,0 +1,7 @@
+import { VirtualizedTokenListProps } from "./types.js";
+import { FC } from "react";
+//#region src/components/TokenList/VirtualizedTokenList.d.ts
+declare const VirtualizedTokenList: FC<VirtualizedTokenListProps>;
+//#endregion
+export { VirtualizedTokenList };
+//# sourceMappingURL=VirtualizedTokenList.d.ts.map

package/dist/esm/components/TokenList/VirtualizedTokenList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedTokenList.d.ts","names":[],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"mappings":";;;cAiBa,sBAAsB,GAAG"}

package/dist/esm/components/TokenList/VirtualizedTokenList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTokenList.js","names":["List"],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { FC } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { TokenDetailsSheet } from './TokenDetailsSheet.js'\nimport { List } from './TokenList.style.js'\nimport { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'\nimport type {\n  TokenDetailsSheetBase,\n  VirtualizedTokenListProps,\n} from './types.js'\n\nconst tokenItemHeight = 64 // 60 + 4px margin-bottom\n\nexport const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({\n  tokens,\n  scrollElementRef,\n  chainId,\n  selectedTokenAddress,\n  isLoading,\n  isBalanceLoading,\n  showCategories,\n  showPinnedTokens,\n  onClick,\n  isAllNetworks,\n}) => {\n  const { t } = useTranslation()\n\n  const { chains } = useAvailableChains()\n\n  // Create Set for O(1) chain lookup instead of O(n) find\n  const chainsSet = useMemo(() => {\n    if (!chains) {\n      return undefined\n    }\n    return new Map(chains.map((chain) => [chain.id, chain]))\n  }, [chains])\n\n  const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)\n\n  const onShowTokenDetails = useCallback(\n    (tokenAddress: string, noContractAddress: boolean, chainId: number) => {\n      tokenDetailsSheetRef.current?.open(\n        tokenAddress,\n        noContractAddress,\n        chainId\n      )\n    },\n    []\n  )\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      const token = tokens[index]\n      return `${token.chainId}-${token.address}-${index}`\n    },\n    [tokens]\n  )\n\n  const estimateSize = useCallback(\n    (index: number) => {\n      const currentToken = tokens[index]\n      const previousToken = tokens[index - 1]\n      let size = tokenItemHeight\n\n      // Pinned tokens (always shown, even in all networks mode)\n      if (currentToken.pinned && index === 0) {\n        size += 24\n      }\n      if (previousToken?.pinned && !currentToken.pinned) {\n        size += 32\n      }\n\n      if (!showCategories) {\n        return size\n      }\n\n      if (currentToken.featured && !currentToken.pinned && index === 0) {\n        size += 24\n      }\n\n      // Category transition (excluding pinned tokens)\n      const isNotPinned = !currentToken.pinned && !previousToken?.pinned\n      if (\n        isNotPinned &&\n        ((previousToken?.amount && !currentToken.amount) ||\n          (previousToken?.featured && !currentToken.featured) ||\n          (previousToken?.popular && !currentToken.popular))\n      ) {\n        size += 32\n      }\n\n      return size\n    },\n    [tokens, showCategories]\n  )\n\n  const virtualizerConfig = useMemo(\n    () => ({\n      count: tokens.length,\n      overscan: 5,\n      getScrollElement: () => scrollElementRef.current,\n      estimateSize,\n      getItemKey,\n      paddingEnd: 8,\n    }),\n    [tokens.length, estimateSize, getItemKey, scrollElementRef]\n  )\n\n  const { getVirtualItems, getTotalSize, scrollToIndex, measure } =\n    useVirtualizer(virtualizerConfig)\n\n  // Address the issue of disappearing tokens on rerender\n  useEffect(() => {\n    if (scrollElementRef.current) {\n      measure()\n    }\n  }, [measure, scrollElementRef.current])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes\n  useEffect(() => {\n    // Scroll to the top of the list when switching the chains\n    if (getVirtualItems().length) {\n      scrollToIndex(0, { align: 'start' })\n    }\n    // Close the token details sheet when switching the chains\n    tokenDetailsSheetRef.current?.close()\n  }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems])\n\n  return (\n    <>\n      <List\n        className=\"long-list\"\n        style={{ height: getTotalSize() }}\n        disablePadding\n      >\n        {getVirtualItems().map((item) => {\n          const currentToken = tokens[item.index]\n          const previousToken: TokenAmount | undefined = tokens[item.index - 1]\n          const chain = chainsSet?.get(currentToken.chainId)\n\n          const isNotPinned = !currentToken.pinned\n          const isFirstPinnedToken = currentToken.pinned && item.index === 0\n          const isTransitionFromPinned = previousToken?.pinned && isNotPinned\n\n          // Category transitions (excluding pinned)\n          const isTransitionFromFeatured =\n            previousToken?.featured && !currentToken.featured && isNotPinned\n          const isTransitionFromMyTokens =\n            previousToken?.amount && !currentToken.amount && isNotPinned\n          const isTransitionFromPopular =\n            previousToken?.popular && !currentToken.popular && isNotPinned\n\n          // Determine which category label to show\n          const startAdornmentLabel = (() => {\n            if (showPinnedTokens && isFirstPinnedToken) {\n              return t('main.pinnedTokens')\n            }\n            if (showPinnedTokens && !showCategories && isTransitionFromPinned) {\n              return t('main.allTokens')\n            }\n            if (!showCategories) {\n              return null\n            }\n\n            if (\n              (isTransitionFromPinned && currentToken.featured) ||\n              (currentToken.featured && isNotPinned && item.index === 0)\n            ) {\n              return t('main.featuredTokens')\n            }\n            if (\n              (isTransitionFromFeatured || isTransitionFromPinned) &&\n              currentToken.amount &&\n              isNotPinned\n            ) {\n              return t('main.myTokens')\n            }\n            if (\n              (isTransitionFromFeatured ||\n                isTransitionFromMyTokens ||\n                isTransitionFromPinned) &&\n              currentToken.popular &&\n              isNotPinned\n            ) {\n              return t('main.popularTokens')\n            }\n            if (\n              isTransitionFromMyTokens ||\n              isTransitionFromFeatured ||\n              isTransitionFromPinned ||\n              isTransitionFromPopular\n            ) {\n              return t('main.allTokens')\n            }\n            return null\n          })()\n\n          const isSelected =\n            selectedTokenAddress === currentToken.address &&\n            chainId === currentToken.chainId\n\n          return (\n            <TokenListItem\n              key={item.key}\n              onClick={onClick}\n              size={item.size}\n              start={item.start}\n              token={currentToken}\n              chain={isAllNetworks ? chain : undefined}\n              selected={isSelected}\n              onShowTokenDetails={onShowTokenDetails}\n              isBalanceLoading={isBalanceLoading}\n              startAdornment={\n                startAdornmentLabel ? (\n                  <Typography\n                    sx={{\n                      fontSize: 14,\n                      fontWeight: 600,\n                      lineHeight: '16px',\n                      px: 1.5,\n                      pt:\n                        isFirstPinnedToken ||\n                        (currentToken.featured &&\n                          isNotPinned &&\n                          item.index === 0)\n                          ? 0\n                          : 1,\n                      pb: 1,\n                    }}\n                  >\n                    {startAdornmentLabel}\n                  </Typography>\n                ) : null\n              }\n            />\n          )\n        })}\n      </List>\n      <TokenDetailsSheet ref={tokenDetailsSheetRef} />\n      {isLoading && (\n        <List disablePadding sx={{ cursor: 'default' }}>\n          {Array.from({ length: 3 }).map((_, index) => (\n            <TokenListItemSkeleton key={index} />\n          ))}\n        </List>\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"VirtualizedTokenList.js","names":["List"],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { FC } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { TokenDetailsSheet } from './TokenDetailsSheet.js'\nimport { List } from './TokenList.style.js'\nimport { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'\nimport type {\n  TokenDetailsSheetBase,\n  VirtualizedTokenListProps,\n} from './types.js'\n\nconst tokenItemHeight = 64 // 60 + 4px margin-bottom\n\nexport const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({\n  tokens,\n  scrollElementRef,\n  chainId,\n  selectedTokenAddress,\n  isLoading,\n  isBalanceLoading,\n  showCategories,\n  showPinnedTokens,\n  onClick,\n  isAllNetworks,\n}) => {\n  const { t } = useTranslation()\n\n  const { chains } = useAvailableChains()\n\n  // Create Set for O(1) chain lookup instead of O(n) find\n  const chainsSet = useMemo(() => {\n    if (!chains) {\n      return undefined\n    }\n    return new Map(chains.map((chain) => [chain.id, chain]))\n  }, [chains])\n\n  const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)\n\n  const onShowTokenDetails = useCallback(\n    (tokenAddress: string, noContractAddress: boolean, chainId: number) => {\n      tokenDetailsSheetRef.current?.open(\n        tokenAddress,\n        noContractAddress,\n        chainId\n      )\n    },\n    []\n  )\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      const token = tokens[index]\n      return `${token.chainId}-${token.address}-${index}`\n    },\n    [tokens]\n  )\n\n  const estimateSize = useCallback(\n    (index: number) => {\n      const currentToken = tokens[index]\n      const previousToken = tokens[index - 1]\n      let size = tokenItemHeight\n\n      // Pinned tokens (always shown, even in all networks mode)\n      if (currentToken.pinned && index === 0) {\n        size += 24\n      }\n      if (previousToken?.pinned && !currentToken.pinned) {\n        size += 32\n      }\n\n      if (!showCategories) {\n        return size\n      }\n\n      if (currentToken.featured && !currentToken.pinned && index === 0) {\n        size += 24\n      }\n\n      // Category transition (excluding pinned tokens)\n      const isNotPinned = !currentToken.pinned && !previousToken?.pinned\n      if (\n        isNotPinned &&\n        ((previousToken?.amount && !currentToken.amount) ||\n          (previousToken?.featured && !currentToken.featured) ||\n          (previousToken?.popular && !currentToken.popular))\n      ) {\n        size += 32\n      }\n\n      return size\n    },\n    [tokens, showCategories]\n  )\n\n  const virtualizerConfig = useMemo(\n    () => ({\n      count: tokens.length,\n      overscan: 5,\n      getScrollElement: () => scrollElementRef.current,\n      estimateSize,\n      getItemKey,\n      paddingEnd: 8,\n    }),\n    [tokens.length, estimateSize, getItemKey, scrollElementRef]\n  )\n\n  const { getVirtualItems, getTotalSize, scrollToIndex, measure } =\n    useVirtualizer(virtualizerConfig)\n\n  // Address the issue of disappearing tokens on rerender\n  useEffect(() => {\n    if (scrollElementRef.current) {\n      measure()\n    }\n  }, [measure, scrollElementRef.current])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes\n  useEffect(() => {\n    // Scroll to the top of the list when switching the chains\n    if (getVirtualItems().length) {\n      scrollToIndex(0, { align: 'start' })\n    }\n    // Close the token details sheet when switching the chains\n    tokenDetailsSheetRef.current?.close()\n  }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems])\n\n  return (\n    <>\n      <List\n        className=\"long-list\"\n        style={{ height: getTotalSize() }}\n        disablePadding\n      >\n        {getVirtualItems().map((item) => {\n          const currentToken = tokens[item.index]\n          const previousToken: TokenAmount | undefined = tokens[item.index - 1]\n          const chain = chainsSet?.get(currentToken.chainId)\n\n          const isNotPinned = !currentToken.pinned\n          const isFirstPinnedToken = currentToken.pinned && item.index === 0\n          const isTransitionFromPinned = previousToken?.pinned && isNotPinned\n\n          // Category transitions (excluding pinned)\n          const isTransitionFromFeatured =\n            previousToken?.featured && !currentToken.featured && isNotPinned\n          const isTransitionFromMyTokens =\n            previousToken?.amount && !currentToken.amount && isNotPinned\n          const isTransitionFromPopular =\n            previousToken?.popular && !currentToken.popular && isNotPinned\n\n          // Determine which category label to show\n          const startAdornmentLabel = (() => {\n            if (showPinnedTokens && isFirstPinnedToken) {\n              return t('main.pinnedTokens')\n            }\n            if (showPinnedTokens && !showCategories && isTransitionFromPinned) {\n              return t('main.allTokens')\n            }\n            if (!showCategories) {\n              return null\n            }\n\n            if (\n              (isTransitionFromPinned && currentToken.featured) ||\n              (currentToken.featured && isNotPinned && item.index === 0)\n            ) {\n              return t('main.featuredTokens')\n            }\n            if (\n              (isTransitionFromFeatured || isTransitionFromPinned) &&\n              currentToken.amount &&\n              isNotPinned\n            ) {\n              return t('main.myTokens')\n            }\n            if (\n              (isTransitionFromFeatured ||\n                isTransitionFromMyTokens ||\n                isTransitionFromPinned) &&\n              currentToken.popular &&\n              isNotPinned\n            ) {\n              return t('main.popularTokens')\n            }\n            if (\n              isTransitionFromMyTokens ||\n              isTransitionFromFeatured ||\n              isTransitionFromPinned ||\n              isTransitionFromPopular\n            ) {\n              return t('main.allTokens')\n            }\n            return null\n          })()\n\n          const isSelected =\n            selectedTokenAddress === currentToken.address &&\n            chainId === currentToken.chainId\n\n          return (\n            <TokenListItem\n              key={item.key}\n              onClick={onClick}\n              size={item.size}\n              start={item.start}\n              token={currentToken}\n              chain={isAllNetworks ? chain : undefined}\n              selected={isSelected}\n              onShowTokenDetails={onShowTokenDetails}\n              isBalanceLoading={isBalanceLoading}\n              startAdornment={\n                startAdornmentLabel ? (\n                  <Typography\n                    sx={{\n                      fontSize: 14,\n                      fontWeight: 600,\n                      lineHeight: '16px',\n                      px: 1.5,\n                      pt:\n                        isFirstPinnedToken ||\n                        (currentToken.featured &&\n                          isNotPinned &&\n                          item.index === 0)\n                          ? 0\n                          : 1,\n                      pb: 1,\n                    }}\n                  >\n                    {startAdornmentLabel}\n                  </Typography>\n                ) : null\n              }\n            />\n          )\n        })}\n      </List>\n      <TokenDetailsSheet ref={tokenDetailsSheetRef} />\n      {isLoading && (\n        <List disablePadding sx={{ cursor: 'default' }}>\n          {Array.from({ length: 3 }).map((_, index) => (\n            <TokenListItemSkeleton key={index} />\n          ))}\n        </List>\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import "../../stores/form/types.js";
+import { TokenAmount as TokenAmount$1 } from "../../types/token.js";
+import { ExtendedChain } from "@lifi/sdk";
+import { RefObject } from "react";
+//#region src/components/TokenList/types.d.ts
+interface VirtualizedTokenListProps {
+  tokens: TokenAmount$1[];
+  scrollElementRef: RefObject<HTMLElement | null>;
+  isLoading: boolean;
+  isBalanceLoading: boolean;
+  chainId?: number;
+  showCategories?: boolean;
+  showPinnedTokens?: boolean;
+  onClick(tokenAddress: string, chainId?: number): void;
+  selectedTokenAddress?: string;
+  isAllNetworks: boolean;
+}
+//#endregion
+export { VirtualizedTokenListProps };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/TokenList/types.ts"],"mappings":";;;;;UAUiB;EACf,QAAQ;EACR,kBAAkB,UAAU;EAC5B;EACA;EACA;EACA;EACA;EACA,QAAQ,sBAAsB;EAC9B;EACA"}

package/dist/esm/components/TokenList/useTokenSelect.d.ts

@@ -0,0 +1,6 @@
+import { FormType } from "../../stores/form/types.js";
+//#region src/components/TokenList/useTokenSelect.d.ts
+declare const useTokenSelect: (formType: FormType, onClick?: () => void) => ((tokenAddress: string, chainId?: number) => void);
+//#endregion
+export { useTokenSelect };
+//# sourceMappingURL=useTokenSelect.d.ts.map

package/dist/esm/components/TokenList/useTokenSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTokenSelect.d.ts","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"mappings":";;cAaa,iBACX,UAAU,UACV,2BACG,sBAAsB"}

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

@@ -1 +1 @@
-{"version":3,"file":"TokenPillButton.js","names":[],"sources":["../../../../src/components/TokenPillButton/TokenPillButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\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 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 } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport {\n  TokenPill,\n  TokenPillLabel,\n  TokenPillSymbol,\n  TokenSelectPill,\n} from './TokenPillButton.style.js'\n\nexport const TokenPillButton: React.FC<FormTypeProps> = ({\n  formType,\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n\n  const { chain } = useChain(chainId)\n  const { token } = useToken(chainId, tokenAddress)\n\n  const isSelected = !!(chain && token)\n\n  const handleClick = (): void => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isDisabled = !!disabledUI?.[tokenKey as keyof DisabledUIConfig]\n\n  const testId = `widget-${formType}-token-button`\n\n  if (isSelected) {\n    return (\n      <TokenPill\n        onClick={isDisabled ? undefined : handleClick}\n        disabled={isDisabled}\n        data-testid={testId}\n      >\n        <TokenAvatar\n          token={token}\n          chain={chain}\n          tokenAvatarSize={24}\n          chainAvatarSize={12}\n        />\n        <TokenPillSymbol>{token.symbol}</TokenPillSymbol>\n      </TokenPill>\n    )\n  }\n\n  return (\n    <TokenSelectPill\n      onClick={isDisabled ? undefined : handleClick}\n      data-testid={testId}\n    >\n      <AvatarBadgedDefault chain={chain} avatarSize={24} badgeSize={12} />\n      <TokenPillLabel>{t('main.select')}</TokenPillLabel>\n    </TokenSelectPill>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,mBAA4C,EACvD,eACiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAE7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CAEA,MAAM,EAAE,UAAU,SAAS,OAAO;CAClC,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAEhD,MAAM,aAAa,CAAC,EAAE,SAAS;CAE/B,MAAM,oBAA0B;EAC9B,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,CAAC,aAAa;CAElC,MAAM,SAAS,UAAU,SAAS;CAElC,IAAI,YACF,OACE,qBAAC,WAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,UAAU;EACV,eAAa;YAHf,CAKE,oBAAC,aAAD;GACS;GACA;GACP,iBAAiB;GACjB,iBAAiB;EAClB,CAAA,GACD,oBAAC,iBAAD,EAAA,UAAkB,MAAM,OAAwB,CAAA,CACvC;;CAIf,OACE,qBAAC,iBAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,eAAa;YAFf,CAIE,oBAAC,qBAAD;GAA4B;GAAO,YAAY;GAAI,WAAW;EAAK,CAAA,GACnE,oBAAC,gBAAD,EAAA,UAAiB,EAAE,aAAa,EAAkB,CAAA,CACnC;;AAErB"}
+{"version":3,"file":"TokenPillButton.js","names":[],"sources":["../../../../src/components/TokenPillButton/TokenPillButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\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 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 } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport {\n  TokenPill,\n  TokenPillLabel,\n  TokenPillSymbol,\n  TokenSelectPill,\n} from './TokenPillButton.style.js'\n\nexport const TokenPillButton: React.FC<FormTypeProps> = ({\n  formType,\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n\n  const { chain } = useChain(chainId)\n  const { token } = useToken(chainId, tokenAddress)\n\n  const isSelected = !!(chain && token)\n\n  const handleClick = (): void => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isDisabled = !!disabledUI?.[tokenKey as keyof DisabledUIConfig]\n\n  const testId = `widget-${formType}-token-button`\n\n  if (isSelected) {\n    return (\n      <TokenPill\n        onClick={isDisabled ? undefined : handleClick}\n        disabled={isDisabled}\n        data-testid={testId}\n      >\n        <TokenAvatar\n          token={token}\n          chain={chain}\n          tokenAvatarSize={24}\n          chainAvatarSize={12}\n        />\n        <TokenPillSymbol>{token.symbol}</TokenPillSymbol>\n      </TokenPill>\n    )\n  }\n\n  return (\n    <TokenSelectPill\n      onClick={isDisabled ? undefined : handleClick}\n      data-testid={testId}\n    >\n      <AvatarBadgedDefault chain={chain} avatarSize={24} badgeSize={12} />\n      <TokenPillLabel>{t('main.select')}</TokenPillLabel>\n    </TokenSelectPill>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,mBAA4C,EACvD,eACiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAE7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CAEA,MAAM,EAAE,UAAU,SAAS,OAAO;CAClC,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAEhD,MAAM,aAAa,CAAC,EAAE,SAAS;CAE/B,MAAM,oBAA0B;EAC9B,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,CAAC,aAAa;CAElC,MAAM,SAAS,UAAU,SAAS;CAElC,IAAI,YACF,OACE,qBAAC,WAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,UAAU;EACV,eAAa;EAHf,UAAA,CAKE,oBAAC,aAAD;GACS;GACA;GACP,iBAAiB;GACjB,iBAAiB;EAClB,CAAA,GACD,oBAAC,iBAAD,EAAA,UAAkB,MAAM,OAAwB,CAAA,CACvC;;CAIf,OACE,qBAAC,iBAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,eAAa;EAFf,UAAA,CAIE,oBAAC,qBAAD;GAA4B;GAAO,YAAY;GAAI,WAAW;EAAK,CAAA,GACnE,oBAAC,gBAAD,EAAA,UAAiB,EAAE,aAAa,EAAkB,CAAA,CACnC;;AAErB"}