npm - @lifi/widget - Versions diffs - 4.0.0-beta.14 → 4.0.0-beta.18 - Mend

@lifi/widget 4.0.0-beta.14 → 4.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

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

	@@ -1 +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 { forwardRef, 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'\nimport type { TokenDetailsSheetBase } from './types.js'\n\ninterface TokenDetailsSheetContentProps {\n tokenAddress: string \| undefined\n chainId: number \| undefined\n withoutContractAddress: boolean\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent: React.ForwardRefExoticComponent<\n TokenDetailsSheetContentProps & React.RefAttributes<TokenDetailsSheetBase>\n> = forwardRef<TokenDetailsSheetBase, TokenDetailsSheetContentProps>(\n ({ tokenAddress, chainId, withoutContractAddress }, ref) => {\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 fontWeight={700}\n fontSize=\"24px\"\n lineHeight=\"24px\"\n color=\"text.primary\"\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 if (ref && typeof ref !== 'function') {\n ref.current?.close()\n }\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)\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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"}
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 { forwardRef, 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'\nimport type { TokenDetailsSheetBase } from './types.js'\n\ninterface TokenDetailsSheetContentProps {\n tokenAddress: string \| undefined\n chainId: number \| undefined\n withoutContractAddress: boolean\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent: React.ForwardRefExoticComponent<\n TokenDetailsSheetContentProps & React.RefAttributes<TokenDetailsSheetBase>\n> = forwardRef<TokenDetailsSheetBase, TokenDetailsSheetContentProps>(\n ({ tokenAddress, chainId, withoutContractAddress }, ref) => {\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 if (ref && typeof ref !== 'function') {\n ref.current?.close()\n }\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)\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":";;;;;;;;;;;;;;;AA2BA,MAAM,cAAc;AAEpB,MAAa,2BAET,YACD,EAAE,cAAc,SAAS,0BAA0B,QAAQ;CAC1D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,mBAAmB,aAAa;CACxC,MAAM,EAAE,iBAAiB,oBAAoB;CAE7C,MAAM,EAAE,OAAO,cAAc,SAAS,SAAS,cAAc,KAAK;CAClE,MAAM,QAAQ,cAAc,aAAa,QAAQ,EAAE,CAAC,SAAS,aAAa,CAAC;CAE3E,MAAM,sBAAsB,OAAO,MAAwB;AACzD,IAAE,iBAAiB;AACnB,MAAI;AAEF,SAAM,UAAU,UAAU,UAAU,gBAAgB,GAAG;UACjD;;AAKV,QACE,qBAAC,4BAAD,EAAA,UAAA;EACE,qBAAC,yBAAD,EAAA,UAAA,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,eAAe;IACf,YAAY;IACZ,KAAK;IACN;aANH,CAQE,oBAAC,aAAD;IACS;IACA;IACP,iBAAiB;IACjB,iBAAiB;IACN;IACX,CAAA,EACF,oBAAC,iBAAD,EAAA,UACG,YACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;IAAU,SAAQ;IAAU,OAAO;IAAI,QAAQ;IAAM,CAAA,EACrD,oBAAC,UAAD;IAAU,SAAQ;IAAU,OAAO;IAAI,QAAQ;IAAM,CAAA,CACpD,EAAA,CAAA,GAEH,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,UAAU;KACV,YAAY;KACZ,OAAO;KACR;cAEA,OAAO,UAAU;IACP,CAAA,EACb,oBAAC,OAAD,EAAA,UAAQ,OAAO,QAAQ,aAAoB,CAAA,CAC1C,EAAA,CAAA,EAEW,CAAA,CACd;MACN,oBAAC,YAAD;GACE,UAAU,MAAM;AACd,MAAE,iBAAiB;AACnB,QAAI,OAAO,OAAO,QAAQ,WACxB,KAAI,SAAS,OAAO;;GAGxB,IAAI;IAAE,IAAI;IAAQ,IAAI;IAAQ;aAE9B,oBAAC,OAAD,EAAS,CAAA;GACE,CAAA,CACW,EAAA,CAAA;EAC1B,oBAAC,oBAAD;GACa;GACX,OAAO,EAAE,2BAA2B;GACpC,OAAO;GACP,QAAQ;aAER,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,UAAU;KACV,YAAY;KACZ,OAAO;KACR;cAEA,OAAO,WACJ,EAAE,mBAAmB,EACnB,OAAO,MAAM,UACd,CAAC,GACF;IACO,CAAA;GACM,CAAA;EACpB,CAAC,0BACA,oBAAC,oBAAD;GACa;GACX,OAAO,EAAE,8BAA8B;GACvC,OAAO;GACP,QAAQ;aAER,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,eAAe;KACf,YAAY;KACZ,KAAK;KACN;cANH;KAQE,oBAAC,YAAD;MACE,IAAI;OACF,YAAY;OACZ,UAAU;OACV,YAAY;OACZ,OAAO;OACR;gBAEA,eAAe,aAAa;MAClB,CAAA;KACZ,gBACC,oBAAC,gBAAD;MAAgB,MAAK;MAAQ,SAAS;gBACpC,oBAAC,oBAAD,EAAoB,UAAS,WAAY,CAAA;MAC1B,CAAA;KAElB,gBACC,oBAAC,gBAAD;MACE,MAAK;MACL,eAAe;MACf,MAAM,eAAe,cAAc,QAAQ;MAC3C,QAAO;MACP,KAAI;MACJ,UAAU,MAAM,EAAE,iBAAiB;gBAEnC,oBAAC,kBAAD,EAAkB,UAAS,WAAY,CAAA;MACxB,CAAA;KAEf;;GACa,CAAA;EAEvB,oBAAC,oBAAD;GACa;GACX,OAAO,EAAE,wBAAwB;GACjC,OAAO;GACP,QAAQ;aAER,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,UAAU;KACV,YAAY;KACZ,OAAO;KACR;cAEA,OAAO,eACJ,EAAE,mBAAmB;KACnB,OAAO,MAAM;KACb,UAAU;KACV,gBAAgB;KAChB,uBAAuB;KACxB,CAAC,GACF;IACO,CAAA;GACM,CAAA;EACrB,oBAAC,oBAAD;GACa;GACX,OAAO,EAAE,wBAAwB;GACjC,OAAO;GACP,QAAQ;aAER,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,UAAU;KACV,YAAY;KACZ,OAAO;KACR;cAEA,OAAO,eACJ,EAAE,mBAAmB;KACnB,OAAO,MAAM;KACb,UAAU;KACV,gBAAgB;KAChB,uBAAuB;KACxB,CAAC,GACF;IACO,CAAA;GACM,CAAA;EACM,EAAA,CAAA;EAGlC;AASD,MAAM,sBAAsB,EAC1B,OACA,OACA,QACA,WACA,eACgD;AAChD,QACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,OAAD,EAAA,UAAQ,OAAc,CAAA,EACrB,YACC,oBAAC,UAAD;EAAU,SAAQ;EAAiB;EAAe;EAAU,CAAA,GAE5D,SAEc,EAAA,CAAA"}

package/dist/esm/components/TokenList/TokenList.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { FormKeyHelper } from "../../stores/form/types.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
@@ -30,7 +30,7 @@ const TokenList = memo(({ formType, headerRef }) => {
 	const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks;
 	useEffect(() => {
 		const normalizedSearchFilter = tokenSearchFilter?.replaceAll("$", "");
-		if (normalizedSearchFilter) emitter.emit(WidgetEvent.TokenSearch, {
+		if (normalizedSearchFilter) emitter.emit("tokenSearch", {
 			value: normalizedSearchFilter,
 			tokens
 		});

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

	@@ -1 +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,iBAAiB;CACtC,MAAM,gBAAgB,OAAgC,KAAK;CAC3D,MAAM,EAAE,eAAe,cAAc;EACnC;EACA;EACD,CAAC;CAEF,MAAM,UAAU,iBAAiB;CAEjC,MAAM,CAAC,iBAAiB,wBAAwB,eAC9C,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,gBAC9B;CAED,MAAM,CAAC,qBAA+B,kBACpC,KACA,oBACD;CAED,MAAM,EACJ,QACA,gBACA,kBACA,iBACA,kBACA,oBACE,iBACF,iBACA,UACA,eACA,kBACD;CAED,MAAM,mBAAmB,eAAe,UAAU,aAAa;CAE/D,MAAM,iBAAiB,kBAAkB,CAAC,qBAAqB,CAAC;AAEhE,iBAAgB;EACd,MAAM,yBAAyB,mBAAmB,WAAW,KAAK,GAAG;AACrE,MAAI,uBACF,SAAQ,~~KAAK~~,~~YAAY,aAAa~~;GACpC,OAAO;GACP;GACD,CAAC;IAEH;EAAC;EAAmB;EAAQ;EAAQ,CAAC;AAExC,QACE,qBAAC,KAAD;EAAK,KAAK;EAAe,OAAO;GAAE,QAAQ;GAAY,UAAU;GAAQ;YAAxE,CACG,CAAC,OAAO,UAAU,CAAC,mBAAmB,CAAC,kBACtC,oBAAC,eAAD,EAAyB,UAAY,CAAA,GACnC,MACJ,oBAAC,sBAAD;GACU;GACR,kBAAkB;GAClB,SAAS;GACT,WAAW,mBAAmB;GACZ;GACF;GAChB,kBAAkB;GAClB,SAAS;GACa;GACP;GACf,CAAA,CACE;;EAER"}
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,iBAAiB;CACtC,MAAM,gBAAgB,OAAgC,KAAK;CAC3D,MAAM,EAAE,eAAe,cAAc;EACnC;EACA;EACD,CAAC;CAEF,MAAM,UAAU,iBAAiB;CAEjC,MAAM,CAAC,iBAAiB,wBAAwB,eAC9C,cAAc,YAAY,SAAS,EACnC,cAAc,YAAY,SAAS,CACpC;CAED,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,gBAC9B;CAED,MAAM,CAAC,qBAA+B,kBACpC,KACA,oBACD;CAED,MAAM,EACJ,QACA,gBACA,kBACA,iBACA,kBACA,oBACE,iBACF,iBACA,UACA,eACA,kBACD;CAED,MAAM,mBAAmB,eAAe,UAAU,aAAa;CAE/D,MAAM,iBAAiB,kBAAkB,CAAC,qBAAqB,CAAC;AAEhE,iBAAgB;EACd,MAAM,yBAAyB,mBAAmB,WAAW,KAAK,GAAG;AACrE,MAAI,uBACF,SAAQ,KAAA,eAA8B;GACpC,OAAO;GACP;GACD,CAAC;IAEH;EAAC;EAAmB;EAAQ;EAAQ,CAAC;AAExC,QACE,qBAAC,KAAD;EAAK,KAAK;EAAe,OAAO;GAAE,QAAQ;GAAY,UAAU;GAAQ;YAAxE,CACG,CAAC,OAAO,UAAU,CAAC,mBAAmB,CAAC,kBACtC,oBAAC,eAAD,EAAyB,UAAY,CAAA,GACnC,MACJ,oBAAC,sBAAD;GACU;GACR,kBAAkB;GAClB,SAAS;GACT,WAAW,mBAAmB;GACZ;GACF;GAChB,kBAAkB;GAClB,SAAS;GACa;GACP;GACf,CAAA,CACE;;EAER"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","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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"}
1	+ {"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","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/VirtualizedTokenList.js.map CHANGED Viewed

	@@ -1 +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 }),\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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"}
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 }),\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/useTokenSelect.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../../types/events.js";
+import "../../types/events.js";
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { useSplitSubvariantStore } from "../../stores/settings/useSplitSubvariantStore.js";
 import { FormKeyHelper } from "../../stores/form/types.js";
@@ -50,7 +50,7 @@ const useTokenSelect = (formType, onClick) => {
 			selectedOppositeChainId,
 			selectedOppositeTokenAddress
 		});
-		const eventToEmit = formType === "from" ? WidgetEvent.SourceChainTokenSelected : WidgetEvent.DestinationChainTokenSelected;
+		const eventToEmit = formType === "from" ? "sourceChainTokenSelected" : "destinationChainTokenSelected";
 		if (selectedChainId) emitter.emit(eventToEmit, {
 			chainId: selectedChainId,
 			tokenAddress

package/dist/esm/components/TokenList/useTokenSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTokenSelect.js","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { DisabledUI } from '../../types/widget.js'\nimport { isItemAllowed } from '../../utils/item.js'\n\nexport const useTokenSelect = (\n formType: FormType,\n onClick?: () => void\n): ((tokenAddress: string, chainId?: number) => void) => {\n const { subvariant, disabledUI, chains: chainsConfig } = useWidgetConfig()\n const splitSubvariant = useSplitSubvariantStore((store) => store.state)\n const emitter = useWidgetEvents()\n const { setFieldValue, getFieldValues } = useFieldActions()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [\n state.setChain,\n state.setIsAllNetworks,\n ])\n\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n\n return useCallback(\n (tokenAddress: string, chainId?: number) => {\n setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })\n const selectedChainId =\n chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]\n // Set chain again to trigger URL builder update\n setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {\n isDirty: true,\n isTouched: true,\n })\n const amountKey = FormKeyHelper.getAmountKey(formType)\n if (!disabledUI?.includes(amountKey as DisabledUI)) {\n setFieldValue(amountKey, '')\n }\n const oppositeFormType = formType === 'from' ? 'to' : 'from'\n const [\n selectedOppositeTokenAddress,\n selectedOppositeChainId,\n selectedToAddress,\n ] = getFieldValues(\n FormKeyHelper.getTokenKey(oppositeFormType),\n FormKeyHelper.getChainKey(oppositeFormType),\n 'toAddress'\n )\n\n // TODO: remove when we enable same chain/token transfers\n const isSameTokenTransfer =\n selectedOppositeTokenAddress === tokenAddress &&\n selectedOppositeChainId === selectedChainId\n\n const isBridgeToSameChain =\n subvariant === 'split' &&\n splitSubvariant === 'bridge' &&\n selectedOppositeChainId === selectedChainId\n\n if (\n (isSameTokenTransfer \|\| isBridgeToSameChain) &&\n subvariant !== 'custom'\n ) {\n setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {\n isDirty: true,\n isTouched: true,\n })\n }\n\n // If no opposite token is selected, synchronize the opposite chain\n // to match the currently selected chain (if allowed).\n // In default exchange mode, also collapse \"All Networks\" on the opposite\n // side - same-chain swap is the most common action.\n if (\n !selectedOppositeTokenAddress &&\n selectedChainId &&\n isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])\n ) {\n const isDefaultExchange = !subvariant \|\| subvariant === 'default'\n if (isDefaultExchange) {\n setIsAllNetworks(false, oppositeFormType)\n }\n setFieldValue(\n FormKeyHelper.getChainKey(oppositeFormType),\n selectedChainId,\n {\n isDirty: true,\n isTouched: true,\n }\n )\n setChain(selectedChainId, oppositeFormType)\n }\n\n // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected\n autoPopulateToAddress({\n formType,\n selectedToAddress,\n selectedChainId,\n selectedOppositeChainId,\n selectedOppositeTokenAddress,\n })\n\n const eventToEmit =\n formType === 'from'\n ? WidgetEvent.SourceChainTokenSelected\n : WidgetEvent.DestinationChainTokenSelected\n\n if (selectedChainId) {\n emitter.emit(eventToEmit, {\n chainId: selectedChainId,\n tokenAddress,\n })\n }\n\n onClick?.()\n },\n [\n autoPopulateToAddress,\n disabledUI,\n emitter,\n formType,\n getFieldValues,\n onClick,\n setChain,\n setIsAllNetworks,\n setFieldValue,\n subvariant,\n splitSubvariant,\n tokenKey,\n chainsConfig,\n ]\n )\n}\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,kBACX,UACA,YACuD;CACvD,MAAM,EAAE,YAAY,YAAY,QAAQ,iBAAiB,iBAAiB;CAC1E,MAAM,kBAAkB,yBAAyB,UAAU,MAAM,MAAM;CACvE,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,wBAAwB,0BAA0B;CACxD,MAAM,CAAC,UAAU,oBAAoB,oBAAoB,UAAU,CACjE,MAAM,UACN,MAAM,iBACP,CAAC;CAEF,MAAM,WAAW,cAAc,YAAY,SAAS;AAEpD,QAAO,aACJ,cAAsB,YAAqB;AAC1C,gBAAc,UAAU,cAAc;GAAE,SAAS;GAAM,WAAW;GAAM,CAAC;EACzE,MAAM,kBACJ,WAAW,eAAe,cAAc,YAAY,SAAS,CAAC,CAAC;AAEjE,gBAAc,cAAc,YAAY,SAAS,EAAE,iBAAiB;GAClE,SAAS;GACT,WAAW;GACZ,CAAC;EACF,MAAM,YAAY,cAAc,aAAa,SAAS;AACtD,MAAI,CAAC,YAAY,SAAS,UAAwB,CAChD,eAAc,WAAW,GAAG;EAE9B,MAAM,mBAAmB,aAAa,SAAS,OAAO;EACtD,MAAM,CACJ,8BACA,yBACA,qBACE,eACF,cAAc,YAAY,iBAAiB,EAC3C,cAAc,YAAY,iBAAiB,EAC3C,YACD;AAYD,OARE,iCAAiC,gBACjC,4BAA4B,mBAG5B,eAAe,WACf,oBAAoB,YACpB,4BAA4B,oBAI5B,eAAe,SAEf,eAAc,cAAc,YAAY,iBAAiB,EAAE,IAAI;GAC7D,SAAS;GACT,WAAW;GACZ,CAAC;AAOJ,MACE,CAAC,gCACD,mBACA,cAAc,iBAAiB,eAAe,kBAAkB,EAChE;AAEA,OAD0B,CAAC,cAAc,eAAe,UAEtD,kBAAiB,OAAO,iBAAiB;AAE3C,iBACE,cAAc,YAAY,iBAAiB,EAC3C,iBACA;IACE,SAAS;IACT,WAAW;IACZ,CACF;AACD,YAAS,iBAAiB,iBAAiB;;AAI7C,wBAAsB;GACpB;GACA;GACA;GACA;GACA;GACD,CAAC;EAEF,MAAM,cACJ,aAAa,~~SACT~~,~~YAAY,2BACZ,YAAY~~;~~AAElB~~,MAAI,gBACF,SAAQ,KAAK,aAAa;GACxB,SAAS;GACT;GACD,CAAC;AAGJ,aAAW;IAEb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}
1	+ {"version":3,"file":"useTokenSelect.js","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { DisabledUI } from '../../types/widget.js'\nimport { isItemAllowed } from '../../utils/item.js'\n\nexport const useTokenSelect = (\n formType: FormType,\n onClick?: () => void\n): ((tokenAddress: string, chainId?: number) => void) => {\n const { subvariant, disabledUI, chains: chainsConfig } = useWidgetConfig()\n const splitSubvariant = useSplitSubvariantStore((store) => store.state)\n const emitter = useWidgetEvents()\n const { setFieldValue, getFieldValues } = useFieldActions()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [\n state.setChain,\n state.setIsAllNetworks,\n ])\n\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n\n return useCallback(\n (tokenAddress: string, chainId?: number) => {\n setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })\n const selectedChainId =\n chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]\n // Set chain again to trigger URL builder update\n setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {\n isDirty: true,\n isTouched: true,\n })\n const amountKey = FormKeyHelper.getAmountKey(formType)\n if (!disabledUI?.includes(amountKey as DisabledUI)) {\n setFieldValue(amountKey, '')\n }\n const oppositeFormType = formType === 'from' ? 'to' : 'from'\n const [\n selectedOppositeTokenAddress,\n selectedOppositeChainId,\n selectedToAddress,\n ] = getFieldValues(\n FormKeyHelper.getTokenKey(oppositeFormType),\n FormKeyHelper.getChainKey(oppositeFormType),\n 'toAddress'\n )\n\n // TODO: remove when we enable same chain/token transfers\n const isSameTokenTransfer =\n selectedOppositeTokenAddress === tokenAddress &&\n selectedOppositeChainId === selectedChainId\n\n const isBridgeToSameChain =\n subvariant === 'split' &&\n splitSubvariant === 'bridge' &&\n selectedOppositeChainId === selectedChainId\n\n if (\n (isSameTokenTransfer \|\| isBridgeToSameChain) &&\n subvariant !== 'custom'\n ) {\n setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {\n isDirty: true,\n isTouched: true,\n })\n }\n\n // If no opposite token is selected, synchronize the opposite chain\n // to match the currently selected chain (if allowed).\n // In default exchange mode, also collapse \"All Networks\" on the opposite\n // side - same-chain swap is the most common action.\n if (\n !selectedOppositeTokenAddress &&\n selectedChainId &&\n isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])\n ) {\n const isDefaultExchange = !subvariant \|\| subvariant === 'default'\n if (isDefaultExchange) {\n setIsAllNetworks(false, oppositeFormType)\n }\n setFieldValue(\n FormKeyHelper.getChainKey(oppositeFormType),\n selectedChainId,\n {\n isDirty: true,\n isTouched: true,\n }\n )\n setChain(selectedChainId, oppositeFormType)\n }\n\n // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected\n autoPopulateToAddress({\n formType,\n selectedToAddress,\n selectedChainId,\n selectedOppositeChainId,\n selectedOppositeTokenAddress,\n })\n\n const eventToEmit =\n formType === 'from'\n ? WidgetEvent.SourceChainTokenSelected\n : WidgetEvent.DestinationChainTokenSelected\n\n if (selectedChainId) {\n emitter.emit(eventToEmit, {\n chainId: selectedChainId,\n tokenAddress,\n })\n }\n\n onClick?.()\n },\n [\n autoPopulateToAddress,\n disabledUI,\n emitter,\n formType,\n getFieldValues,\n onClick,\n setChain,\n setIsAllNetworks,\n setFieldValue,\n subvariant,\n splitSubvariant,\n tokenKey,\n chainsConfig,\n ]\n )\n}\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,kBACX,UACA,YACuD;CACvD,MAAM,EAAE,YAAY,YAAY,QAAQ,iBAAiB,iBAAiB;CAC1E,MAAM,kBAAkB,yBAAyB,UAAU,MAAM,MAAM;CACvE,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,wBAAwB,0BAA0B;CACxD,MAAM,CAAC,UAAU,oBAAoB,oBAAoB,UAAU,CACjE,MAAM,UACN,MAAM,iBACP,CAAC;CAEF,MAAM,WAAW,cAAc,YAAY,SAAS;AAEpD,QAAO,aACJ,cAAsB,YAAqB;AAC1C,gBAAc,UAAU,cAAc;GAAE,SAAS;GAAM,WAAW;GAAM,CAAC;EACzE,MAAM,kBACJ,WAAW,eAAe,cAAc,YAAY,SAAS,CAAC,CAAC;AAEjE,gBAAc,cAAc,YAAY,SAAS,EAAE,iBAAiB;GAClE,SAAS;GACT,WAAW;GACZ,CAAC;EACF,MAAM,YAAY,cAAc,aAAa,SAAS;AACtD,MAAI,CAAC,YAAY,SAAS,UAAwB,CAChD,eAAc,WAAW,GAAG;EAE9B,MAAM,mBAAmB,aAAa,SAAS,OAAO;EACtD,MAAM,CACJ,8BACA,yBACA,qBACE,eACF,cAAc,YAAY,iBAAiB,EAC3C,cAAc,YAAY,iBAAiB,EAC3C,YACD;AAYD,OARE,iCAAiC,gBACjC,4BAA4B,mBAG5B,eAAe,WACf,oBAAoB,YACpB,4BAA4B,oBAI5B,eAAe,SAEf,eAAc,cAAc,YAAY,iBAAiB,EAAE,IAAI;GAC7D,SAAS;GACT,WAAW;GACZ,CAAC;AAOJ,MACE,CAAC,gCACD,mBACA,cAAc,iBAAiB,eAAe,kBAAkB,EAChE;AAEA,OAD0B,CAAC,cAAc,eAAe,UAEtD,kBAAiB,OAAO,iBAAiB;AAE3C,iBACE,cAAc,YAAY,iBAAiB,EAC3C,iBACA;IACE,SAAS;IACT,WAAW;IACZ,CACF;AACD,YAAS,iBAAiB,iBAAiB;;AAI7C,wBAAsB;GACpB;GACA;GACA;GACA;GACA;GACD,CAAC;EAEF,MAAM,cACJ,aAAa,SAAA,6BAAA;AAIf,MAAI,gBACF,SAAQ,KAAK,aAAa;GACxB,SAAS;GACT;GACD,CAAC;AAGJ,aAAW;IAEb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}

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

@@ -1,5 +1,4 @@
 import { Card as Card$1 } from "../Card/Card.js";
-import { RouteExecutionStatus } from "../../stores/routes/types.js";
 import { CircularProgressPending } from "../Step/CircularProgress.style.js";
 import { useActionMessage } from "../../hooks/useActionMessage.js";
 import { IconCircle } from "../IconCircle/IconCircle.js";
@@ -9,14 +8,14 @@ import { DeleteButton, PendingCircle, StatusRow } from "./ActiveTransactionCard.
 import { Box, Tooltip, Typography } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import DeleteOutline from "@mui/icons-material/DeleteOutline";
+import DeleteOutline from "@mui/icons-material/DeleteOutlined";
 //#region src/components/TransactionCard/ActiveTransactionCard.tsx
 const ActiveTransactionCard = ({ route, status, onClick, onDelete }) => {
 	const { t } = useTranslation();
 	const lastActiveStep = route.steps.findLast((step) => step.execution);
 	const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1);
 	const { title } = useActionMessage(lastActiveStep, lastActiveAction);
-	const isFailed = status === RouteExecutionStatus.Failed;
+	const isFailed = status === 8;
 	return /* @__PURE__ */ jsxs(Card$1, {
 		onClick,
 		indented: true,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/~~DeleteOutline~~'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport { ExecutionTimerText, getExpiryTimestamp } from '../Timer/StepTimer.js'\nimport {\n DeleteButton,\n PendingCircle,\n StatusRow,\n} from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n route: RouteExtended\n status?: RouteExecutionStatus\n onClick: () => void\n onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n route,\n status,\n onClick,\n onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n const { t } = useTranslation()\n\n const lastActiveStep = route.steps.findLast((step) => step.execution)\n const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n const isFailed = status === RouteExecutionStatus.Failed\n\n const statusIcon = (() => {\n if (isFailed) {\n return <IconCircle status=\"error\" size={24} />\n }\n if (\n ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n lastActiveAction?.status ?? ''\n )\n ) {\n return <IconCircle status=\"info\" size={24} />\n }\n return (\n <PendingCircle>\n <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n </PendingCircle>\n )\n })()\n\n return (\n <Card onClick={onClick} indented>\n <StatusRow sx={{ mb: 1.5 }}>\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n {statusIcon}\n <Typography sx={{ fontSize: 12, fontWeight: 500 }}>\n {title}\n </Typography>\n </Box>\n {isFailed ? (\n <Tooltip title={t('button.clearTransaction')}>\n <DeleteButton size=\"small\" onClick={onDelete}>\n <DeleteOutline sx={{ fontSize: 16 }} />\n </DeleteButton>\n </Tooltip>\n ) : lastActiveStep?.execution?.signedAt ? (\n <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n <ExecutionTimerText\n expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n />\n </Typography>\n ) : null}\n </StatusRow>\n <RouteTokens route={route} />\n </Card>\n )\n}\n"],"mappings":"~~;;;;;;;;;;;;;~~AAyBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,UAAU;CACrE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,GAAG;CACnE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,iBAAiB;CAEpE,MAAM,WAAW,~~WAAW,qBAAqB~~;~~AAoBjD~~,QACE,qBAACA,QAAD;EAAe;EAAS,UAAA;YAAxB,CACE,qBAAC,WAAD;GAAW,IAAI,EAAE,IAAI,KAAK;aAA1B,CACE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;KAAK;cAA5D,QArBoB;AACxB,SAAI,SACF,QAAO,oBAAC,YAAD;MAAY,QAAO;MAAQ,MAAM;MAAM,CAAA;AAEhD,SACE;MAAC;MAAmB;MAAoB;MAAiB,CAAC,SACxD,kBAAkB,UAAU,GAC7B,CAED,QAAO,oBAAC,YAAD;MAAY,QAAO;MAAO,MAAM;MAAM,CAAA;AAE/C,YACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;MAAyB,MAAM;MAAI,IAAI;OAAE,KAAK;OAAI,MAAM;OAAI;MAAI,CAAA,EAClD,CAAA;~~QAEhB~~,~~EAOI~~,oBAAC,YAAD;KAAY,IAAI;MAAE,UAAU;MAAI,YAAY;MAAK;eAC9C;KACU,CAAA,CACT;OACL,WACC,oBAAC,SAAD;IAAS,OAAO,EAAE,0BAA0B;cAC1C,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;eAClC,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;KAC1B,CAAA;IACP,CAAA,GACR,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;KAAK;cAC/C,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,eAAe,EACnD,CAAA;IACS,CAAA,GACX,KACM;MACZ,oBAAC,aAAD,EAAoB,OAAS,CAAA,CACxB"}
1	+ {"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport { ExecutionTimerText, getExpiryTimestamp } from '../Timer/StepTimer.js'\nimport {\n DeleteButton,\n PendingCircle,\n StatusRow,\n} from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n route: RouteExtended\n status?: RouteExecutionStatus\n onClick: () => void\n onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n route,\n status,\n onClick,\n onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n const { t } = useTranslation()\n\n const lastActiveStep = route.steps.findLast((step) => step.execution)\n const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n const isFailed = status === RouteExecutionStatus.Failed\n\n const statusIcon = (() => {\n if (isFailed) {\n return <IconCircle status=\"error\" size={24} />\n }\n if (\n ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n lastActiveAction?.status ?? ''\n )\n ) {\n return <IconCircle status=\"info\" size={24} />\n }\n return (\n <PendingCircle>\n <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n </PendingCircle>\n )\n })()\n\n return (\n <Card onClick={onClick} indented>\n <StatusRow sx={{ mb: 1.5 }}>\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n {statusIcon}\n <Typography sx={{ fontSize: 12, fontWeight: 500 }}>\n {title}\n </Typography>\n </Box>\n {isFailed ? (\n <Tooltip title={t('button.clearTransaction')}>\n <DeleteButton size=\"small\" onClick={onDelete}>\n <DeleteOutline sx={{ fontSize: 16 }} />\n </DeleteButton>\n </Tooltip>\n ) : lastActiveStep?.execution?.signedAt ? (\n <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n <ExecutionTimerText\n expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n />\n </Typography>\n ) : null}\n </StatusRow>\n <RouteTokens route={route} />\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,UAAU;CACrE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,GAAG;CACnE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,iBAAiB;CAEpE,MAAM,WAAW,WAAA;AAoBjB,QACE,qBAACA,QAAD;EAAe;EAAS,UAAA;YAAxB,CACE,qBAAC,WAAD;GAAW,IAAI,EAAE,IAAI,KAAK;aAA1B,CACE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;KAAK;cAA5D,QArBoB;AACxB,SAAI,SACF,QAAO,oBAAC,YAAD;MAAY,QAAO;MAAQ,MAAM;MAAM,CAAA;AAEhD,SACE;MAAC;MAAmB;MAAoB;MAAiB,CAAC,SACxD,kBAAkB,UAAU,GAC7B,CAED,QAAO,oBAAC,YAAD;MAAY,QAAO;MAAO,MAAM;MAAM,CAAA;AAE/C,YACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;MAAyB,MAAM;MAAI,IAAI;OAAE,KAAK;OAAI,MAAM;OAAI;MAAI,CAAA,EAClD,CAAA;QAQD,EACX,oBAAC,YAAD;KAAY,IAAI;MAAE,UAAU;MAAI,YAAY;MAAK;eAC9C;KACU,CAAA,CACT;OACL,WACC,oBAAC,SAAD;IAAS,OAAO,EAAE,0BAA0B;cAC1C,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;eAClC,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;KAC1B,CAAA;IACP,CAAA,GACR,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;KAAK;cAC/C,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,eAAe,EACnD,CAAA;IACS,CAAA,GACX,KACM;MACZ,oBAAC,aAAD,EAAoB,OAAS,CAAA,CACxB"}

package/dist/esm/components/TransactionDetails.js CHANGED Viewed

@@ -79,8 +79,11 @@ const TransactionDetails = ({ route, ...props }) => {
 								cursor: "pointer"
 							},
 							children: [/* @__PURE__ */ jsx(IconTypography, {
-								mr: .5,
-								fontSize: 16,
+								component: "span",
+								sx: {
+									mr: .5,
+									fontSize: 16
+								},
 								children: /* @__PURE__ */ jsx(LocalGasStationRounded, { fontSize: "inherit" })
 							}), /* @__PURE__ */ jsx(Typography, {
 								"data-value": combinedFeesUSD,

package/dist/esm/components/TransactionDetails.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TransactionDetails.js","names":["Card"],"sources":["../../../src/components/TransactionDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport type { CardProps } from '@mui/material'\nimport { Box, Collapse, Tooltip, Typography } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount, formatTokenPrice } from '../utils/format.js'\nimport { getPriceImpact } from '../utils/getPriceImpact.js'\nimport { Card } from './Card/Card.js'\nimport { CardIconButton } from './Card/CardIconButton.js'\nimport { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js'\nimport { IconTypography } from './IconTypography.js'\nimport { TokenRate } from './TokenRate/TokenRate.js'\n\ninterface TransactionDetailsProps extends CardProps {\n route: RouteExtended\n}\n\nexport const TransactionDetails: React.FC<TransactionDetailsProps> = ({\n route,\n ...props\n}) => {\n const { t } = useTranslation()\n const { feeConfig, defaultUI } = useWidgetConfig()\n const [cardExpanded, setCardExpanded] = useState(\n defaultUI?.transactionDetailsExpanded ?? false\n )\n const { isGaslessStep } = useEthereumContext()\n\n const toggleCard = () => {\n setCardExpanded((cardExpanded) => !cardExpanded)\n }\n const { gasCosts, feeCosts, gasCostUSD, feeCostUSD, combinedFeesUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n\n const priceImpact = getPriceImpact({\n fromAmount: BigInt(route.fromAmount),\n toAmount: BigInt(route.toAmount),\n fromToken: route.fromToken,\n toToken: route.toToken,\n })\n\n const feeCollectionStep = route.steps[0].includedSteps.find(\n (includedStep) => includedStep.tool === 'feeCollection'\n )\n\n let feeAmountUSD = 0\n let feePercentage = 0\n\n if (feeCollectionStep) {\n const estimatedFromAmount =\n BigInt(feeCollectionStep.estimate.fromAmount) -\n BigInt(feeCollectionStep.estimate.toAmount)\n\n feeAmountUSD = formatTokenPrice(\n estimatedFromAmount,\n feeCollectionStep.action.fromToken.priceUSD,\n feeCollectionStep.action.fromToken.decimals\n )\n\n feePercentage =\n feeCollectionStep.estimate.feeCosts?.reduce(\n (percentage, feeCost) =>\n percentage + Number.parseFloat(feeCost.percentage \|\| '0'),\n 0\n ) ?? 0\n }\n\n const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n const showIntegratorFeeCollectionDetails =\n (feeAmountUSD \|\| Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n return (\n <Card selectionColor=\"secondary\" {...props}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n px: 2,\n py: 1.75,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n flex: 1,\n alignItems: 'center',\n justifyContent: 'left',\n }}\n >\n <TokenRate route={route} />\n </Box>\n <Collapse timeout={100} in={!cardExpanded} mountOnEnter>\n <FeeBreakdownTooltip\n gasCosts={gasCosts}\n feeCosts={feeCosts}\n gasless={hasGaslessSupport}\n >\n <Box\n onClick={toggleCard}\n role=\"button\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n px: 1,\n cursor: 'pointer',\n }}\n >\n <IconTypography mr={0.5} fontSize={16}>\n <LocalGasStationRounded fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n data-value={combinedFeesUSD}\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1.429,\n }}\n >\n {!combinedFeesUSD\n ? t('main.fees.free')\n : t('format.currency', { value: combinedFeesUSD })}\n </Typography>\n </Box>\n </FeeBreakdownTooltip>\n </Collapse>\n <CardIconButton onClick={toggleCard} size=\"small\">\n {cardExpanded ? (\n <ExpandLess fontSize=\"inherit\" />\n ) : (\n <ExpandMore fontSize=\"inherit\" />\n )}\n </CardIconButton>\n </Box>\n <Collapse timeout={225} in={cardExpanded} mountOnEnter>\n <Box\n sx={{\n px: 2,\n pb: 2,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">{t('main.fees.network')}</Typography>\n <FeeBreakdownTooltip\n gasCosts={gasCosts}\n gasless={hasGaslessSupport}\n >\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', {\n value: gasCostUSD,\n })}\n </Typography>\n </FeeBreakdownTooltip>\n </Box>\n {feeCosts.length ? (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">{t('main.fees.provider')}</Typography>\n <FeeBreakdownTooltip feeCosts={feeCosts}>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {t('format.currency', {\n value: feeCostUSD,\n })}\n </Typography>\n </FeeBreakdownTooltip>\n </Box>\n ) : null}\n {showIntegratorFeeCollectionDetails ? (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">\n {feeConfig?.name \|\| t('main.fees.defaultIntegrator')}\n {feeConfig?.showFeePercentage && (\n <> ({t('format.percent', { value: feePercentage })})</>\n )}\n </Typography>\n {feeConfig?.showFeeTooltip &&\n (feeConfig?.name \|\| feeConfig?.feeTooltipComponent) ? (\n <Tooltip\n title={\n feeConfig?.feeTooltipComponent \|\|\n t('tooltip.feeCollection', { tool: feeConfig.name })\n }\n >\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {t('format.currency', {\n value: feeAmountUSD,\n })}\n </Typography>\n </Tooltip>\n ) : (\n <Typography variant=\"body2\" sx={{ fontWeight: 600 }}>\n {t('format.currency', {\n value: feeAmountUSD,\n })}\n </Typography>\n )}\n </Box>\n ) : null}\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">{t('main.priceImpact')}</Typography>\n <Tooltip title={t('tooltip.priceImpact')}>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {t('format.percent', {\n value: priceImpact,\n usePlusSign: true,\n })}\n </Typography>\n </Tooltip>\n </Box>\n {!isRouteDone(route) ? (\n <>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">{t('main.maxSlippage')}</Typography>\n <Tooltip title={t('tooltip.slippage')}>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {route.steps[0].action.slippage\n ? t('format.percent', {\n value: route.steps[0].action.slippage,\n })\n : t('button.auto')}\n </Typography>\n </Tooltip>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n }}\n >\n <Typography variant=\"body2\">{t('main.minReceived')}</Typography>\n <Tooltip title={t('tooltip.minReceived')}>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(route.toAmountMin),\n route.toToken.decimals\n ),\n })}{' '}\n {route.toToken.symbol}\n </Typography>\n </Tooltip>\n </Box>\n </>\n ) : null}\n </Box>\n </Collapse>\n </Card>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"TransactionDetails.js","names":["Card"],"sources":["../../../src/components/TransactionDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport type { CardProps } from '@mui/material'\nimport { Box, Collapse, Tooltip, Typography } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount, formatTokenPrice } from '../utils/format.js'\nimport { getPriceImpact } from '../utils/getPriceImpact.js'\nimport { Card } from './Card/Card.js'\nimport { CardIconButton } from './Card/CardIconButton.js'\nimport { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js'\nimport { IconTypography } from './IconTypography.js'\nimport { TokenRate } from './TokenRate/TokenRate.js'\n\ninterface TransactionDetailsProps extends CardProps {\n route: RouteExtended\n}\n\nexport const TransactionDetails: React.FC<TransactionDetailsProps> = ({\n route,\n ...props\n}) => {\n const { t } = useTranslation()\n const { feeConfig, defaultUI } = useWidgetConfig()\n const [cardExpanded, setCardExpanded] = useState(\n defaultUI?.transactionDetailsExpanded ?? false\n )\n const { isGaslessStep } = useEthereumContext()\n\n const toggleCard = () => {\n setCardExpanded((cardExpanded) => !cardExpanded)\n }\n const { gasCosts, feeCosts, gasCostUSD, feeCostUSD, combinedFeesUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n\n const priceImpact = getPriceImpact({\n fromAmount: BigInt(route.fromAmount),\n toAmount: BigInt(route.toAmount),\n fromToken: route.fromToken,\n toToken: route.toToken,\n })\n\n const feeCollectionStep = route.steps[0].includedSteps.find(\n (includedStep) => includedStep.tool === 'feeCollection'\n )\n\n let feeAmountUSD = 0\n let feePercentage = 0\n\n if (feeCollectionStep) {\n const estimatedFromAmount =\n BigInt(feeCollectionStep.estimate.fromAmount) -\n BigInt(feeCollectionStep.estimate.toAmount)\n\n feeAmountUSD = formatTokenPrice(\n estimatedFromAmount,\n feeCollectionStep.action.fromToken.priceUSD,\n feeCollectionStep.action.fromToken.decimals\n )\n\n feePercentage =\n feeCollectionStep.estimate.feeCosts?.reduce(\n (percentage, feeCost) =>\n percentage + Number.parseFloat(feeCost.percentage \|\| '0'),\n 0\n ) ?? 0\n }\n\n const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n const showIntegratorFeeCollectionDetails =\n (feeAmountUSD \|\| Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n return (\n <Card selectionColor=\"secondary\" {...props}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n px: 2,\n py: 1.75,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n flex: 1,\n alignItems: 'center',\n justifyContent: 'left',\n }}\n >\n <TokenRate route={route} />\n </Box>\n <Collapse timeout={100} in={!cardExpanded} mountOnEnter>\n <FeeBreakdownTooltip\n gasCosts={gasCosts}\n feeCosts={feeCosts}\n gasless={hasGaslessSupport}\n >\n <Box\n onClick={toggleCard}\n role=\"button\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n px: 1,\n cursor: 'pointer',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <LocalGasStationRounded fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n data-value={combinedFeesUSD}\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1.429,\n }}\n >\n {!combinedFeesUSD\n ? t('main.fees.free')\n : t('format.currency', { value: combinedFeesUSD })}\n </Typography>\n </Box>\n </FeeBreakdownTooltip>\n </Collapse>\n <CardIconButton onClick={toggleCard} size=\"small\">\n {cardExpanded ? (\n <ExpandLess fontSize=\"inherit\" />\n ) : (\n <ExpandMore fontSize=\"inherit\" />\n )}\n </CardIconButton>\n </Box>\n <Collapse timeout={225} in={cardExpanded} mountOnEnter>\n <Box\n sx={{\n px: 2,\n pb: 2,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">{t('main.fees.network')}</Typography>\n <FeeBreakdownTooltip\n gasCosts={gasCosts}\n gasless={hasGaslessSupport}\n >\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', {\n value: gasCostUSD,\n })}\n </Typography>\n </FeeBreakdownTooltip>\n </Box>\n {feeCosts.length ? (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">{t('main.fees.provider')}</Typography>\n <FeeBreakdownTooltip feeCosts={feeCosts}>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {t('format.currency', {\n value: feeCostUSD,\n })}\n </Typography>\n </FeeBreakdownTooltip>\n </Box>\n ) : null}\n {showIntegratorFeeCollectionDetails ? (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">\n {feeConfig?.name \|\| t('main.fees.defaultIntegrator')}\n {feeConfig?.showFeePercentage && (\n <> ({t('format.percent', { value: feePercentage })})</>\n )}\n </Typography>\n {feeConfig?.showFeeTooltip &&\n (feeConfig?.name \|\| feeConfig?.feeTooltipComponent) ? (\n <Tooltip\n title={\n feeConfig?.feeTooltipComponent \|\|\n t('tooltip.feeCollection', { tool: feeConfig.name })\n }\n >\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {t('format.currency', {\n value: feeAmountUSD,\n })}\n </Typography>\n </Tooltip>\n ) : (\n <Typography variant=\"body2\" sx={{ fontWeight: 600 }}>\n {t('format.currency', {\n value: feeAmountUSD,\n })}\n </Typography>\n )}\n </Box>\n ) : null}\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">{t('main.priceImpact')}</Typography>\n <Tooltip title={t('tooltip.priceImpact')}>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {t('format.percent', {\n value: priceImpact,\n usePlusSign: true,\n })}\n </Typography>\n </Tooltip>\n </Box>\n {!isRouteDone(route) ? (\n <>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n mb: 0.5,\n }}\n >\n <Typography variant=\"body2\">{t('main.maxSlippage')}</Typography>\n <Tooltip title={t('tooltip.slippage')}>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {route.steps[0].action.slippage\n ? t('format.percent', {\n value: route.steps[0].action.slippage,\n })\n : t('button.auto')}\n </Typography>\n </Tooltip>\n </Box>\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'space-between',\n }}\n >\n <Typography variant=\"body2\">{t('main.minReceived')}</Typography>\n <Tooltip title={t('tooltip.minReceived')}>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 600, cursor: 'help' }}\n >\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(route.toAmountMin),\n route.toToken.decimals\n ),\n })}{' '}\n {route.toToken.symbol}\n </Typography>\n </Tooltip>\n </Box>\n </>\n ) : null}\n </Box>\n </Collapse>\n </Card>\n )\n}\n"],"mappings":"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"}

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

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

package/dist/esm/config/version.js CHANGED Viewed

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

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

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

package/dist/esm/hooks/timer/time.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time.js","names":[],"sources":["../../../../src/hooks/timer/time.ts"],"sourcesContent":["export type TimeFromMillisecondsType = {\n totalMilliseconds: number\n totalSeconds: number\n milliseconds: number\n seconds: number\n minutes: number\n hours: number\n days: number\n}\n\nexport function getTimeFromMilliseconds(\n millisecs: number,\n isCountDown = true\n): TimeFromMillisecondsType {\n const totalSeconds = isCountDown\n ? Math.ceil(millisecs / 1000)\n : Math.floor(millisecs / 1000)\n const days = Math.floor(totalSeconds / (60 * 60 * 24))\n const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60))\n const minutes = Math.floor((totalSeconds % (60 * 60)) / 60)\n const seconds = Math.floor(totalSeconds % 60)\n const milliseconds = Math.floor(millisecs % 1000)\n\n return {\n totalMilliseconds: millisecs,\n totalSeconds,\n milliseconds,\n seconds,\n minutes,\n hours,\n days,\n }\n}\n\nexport function getMillisecondsFromExpiry(expiry: Date): number {\n const now = Date.now()\n const milliSecondsDistance = expiry?.getTime() - now\n return milliSecondsDistance > 0 ? milliSecondsDistance : 0\n}\n"],"mappings":";AAUA,SAAgB,wBACd,WACA,cAAc,MACY;CAC1B,MAAM,eAAe,cACjB,KAAK,KAAK,YAAY,IAAK,GAC3B,KAAK,MAAM,YAAY,IAAK;CAChC,MAAM,OAAO,KAAK,MAAM,gBAAgB,OAAU,IAAI;CACtD,MAAM,QAAQ,KAAK,MAAO,gBAAgB,OAAU,MAAQ,KAAS;CACrE,MAAM,UAAU,KAAK,MAAO,eAAgB,OAAY,GAAG;CAC3D,MAAM,UAAU,KAAK,MAAM,eAAe,GAAG;AAG7C,QAAO;EACL,mBAAmB;EACnB;EACA,cALmB,KAAK,MAAM,YAAY,~~IAAK~~;~~EAM/C~~;EACA;EACA;EACA;EACD;;AAGH,SAAgB,0BAA0B,QAAsB;CAC9D,MAAM,MAAM,KAAK,KAAK;CACtB,MAAM,uBAAuB,QAAQ,SAAS,GAAG;AACjD,QAAO,uBAAuB,IAAI,uBAAuB"}
1	+ {"version":3,"file":"time.js","names":[],"sources":["../../../../src/hooks/timer/time.ts"],"sourcesContent":["export type TimeFromMillisecondsType = {\n totalMilliseconds: number\n totalSeconds: number\n milliseconds: number\n seconds: number\n minutes: number\n hours: number\n days: number\n}\n\nexport function getTimeFromMilliseconds(\n millisecs: number,\n isCountDown = true\n): TimeFromMillisecondsType {\n const totalSeconds = isCountDown\n ? Math.ceil(millisecs / 1000)\n : Math.floor(millisecs / 1000)\n const days = Math.floor(totalSeconds / (60 * 60 * 24))\n const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60))\n const minutes = Math.floor((totalSeconds % (60 * 60)) / 60)\n const seconds = Math.floor(totalSeconds % 60)\n const milliseconds = Math.floor(millisecs % 1000)\n\n return {\n totalMilliseconds: millisecs,\n totalSeconds,\n milliseconds,\n seconds,\n minutes,\n hours,\n days,\n }\n}\n\nexport function getMillisecondsFromExpiry(expiry: Date): number {\n const now = Date.now()\n const milliSecondsDistance = expiry?.getTime() - now\n return milliSecondsDistance > 0 ? milliSecondsDistance : 0\n}\n"],"mappings":";AAUA,SAAgB,wBACd,WACA,cAAc,MACY;CAC1B,MAAM,eAAe,cACjB,KAAK,KAAK,YAAY,IAAK,GAC3B,KAAK,MAAM,YAAY,IAAK;CAChC,MAAM,OAAO,KAAK,MAAM,gBAAgB,OAAU,IAAI;CACtD,MAAM,QAAQ,KAAK,MAAO,gBAAgB,OAAU,MAAQ,KAAS;CACrE,MAAM,UAAU,KAAK,MAAO,eAAgB,OAAY,GAAG;CAC3D,MAAM,UAAU,KAAK,MAAM,eAAe,GAAG;AAG7C,QAAO;EACL,mBAAmB;EACnB;EACA,cALmB,KAAK,MAAM,YAAY,IAK9B;EACZ;EACA;EACA;EACA;EACD;;AAGH,SAAgB,0BAA0B,QAAsB;CAC9D,MAAM,MAAM,KAAK,KAAK;CACtB,MAAM,uBAAuB,QAAQ,SAAS,GAAG;AACjD,QAAO,uBAAuB,IAAI,uBAAuB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useAccountsBalancesData.js","names":[],"sources":["../../../src/hooks/useAccountsBalancesData.ts"],"sourcesContent":["import type { ChainType, TokenExtended } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { useMemo } from 'react'\nimport type { FormType } from '../stores/form/types.js'\nimport { useChains } from './useChains.js'\nimport { useFilteredTokensByBalance } from './useFilteredByTokenBalances.js'\n\nexport const useAccountsBalancesData = (\n selectedChainId?: number,\n formType?: FormType,\n isAllNetworks?: boolean,\n allTokens?: Record<number, TokenExtended[]>\n): {\n data: Record<string, Record<number, TokenExtended[]>> \| undefined\n isLoading: boolean\n} => {\n const { data: accountsWithTokens, isLoading: isAccountsLoading } =\n useAccountsData(selectedChainId, formType, isAllNetworks, allTokens)\n\n // Filter out EVM tokens that do not have balances\n const { data: filteredTokens, isLoading: isCachedBalancesLoading } =\n useFilteredTokensByBalance(accountsWithTokens, formType)\n\n return {\n data: filteredTokens,\n isLoading: isAccountsLoading \|\| isCachedBalancesLoading,\n }\n}\n\nconst useAccountsData = (\n selectedChainId?: number,\n formType?: FormType,\n isAllNetworks?: boolean,\n allTokens?: Record<number, TokenExtended[]>\n) => {\n const {\n chains: allChains,\n isLoading: isChainsLoading,\n getChainById,\n } = useChains(formType)\n const currentChain = useMemo(() => {\n return selectedChainId\n ? getChainById(selectedChainId, allChains)\n : undefined\n }, [selectedChainId, allChains, getChainById])\n const chains = useMemo(() => {\n return isAllNetworks ? allChains : currentChain ? [currentChain] : undefined\n }, [allChains, isAllNetworks, currentChain])\n\n const { accounts: allAccounts, account: currentAccount } = useAccount(\n isAllNetworks ? undefined : { chainType: currentChain?.chainType }\n )\n const accounts = useMemo(() => {\n return isAllNetworks\n ? allAccounts\n : currentAccount\n ? [currentAccount]\n : undefined\n }, [allAccounts, currentAccount, isAllNetworks])\n\n const accountsWithTokens = useMemo(() => {\n if (!chains \|\| !allTokens \|\| !accounts?.length) {\n return undefined\n }\n return accounts\n ?.filter((account) => account.address)\n .reduce(\n (acc, account) => {\n if (account.address) {\n const accountChains = chains?.filter(\n (chain) => account.chainType === chain?.chainType\n )\n if (accountChains) {\n const chainIdSet = new Set(accountChains.map((chain) => chain.id))\n const filteredTokens = Object.entries(allTokens).reduce(\n (tokenAcc, [chainIdStr, tokens]) => {\n const chainId = Number(chainIdStr)\n if (chainIdSet.has(chainId)) {\n tokenAcc[chainId] = tokens\n }\n return tokenAcc\n },\n {} as { [chainId: number]: TokenExtended[] }\n )\n acc[account.address] = {\n chainType: account.chainType,\n tokens: filteredTokens,\n }\n }\n }\n return acc\n },\n {} as Record<\n string,\n { chainType: ChainType; tokens: Record<number, TokenExtended[]> }\n >\n )\n }, [accounts, chains, allTokens])\n\n return {\n data: accountsWithTokens,\n isLoading: isChainsLoading,\n }\n}\n"],"mappings":";;;;;AAOA,MAAa,2BACX,iBACA,UACA,eACA,cAIG;CACH,MAAM,EAAE,MAAM,oBAAoB,WAAW,sBAC3C,gBAAgB,iBAAiB,UAAU,eAAe,UAAU;CAGtE,MAAM,EAAE,MAAM,gBAAgB,WAAW,4BACvC,2BAA2B,oBAAoB,SAAS;AAE1D,QAAO;EACL,MAAM;EACN,WAAW,qBAAqB;EACjC;;AAGH,MAAM,mBACJ,iBACA,UACA,eACA,cACG;CACH,MAAM,EACJ,QAAQ,WACR,WAAW,iBACX,iBACE,UAAU,SAAS;CACvB,MAAM,eAAe,cAAc;AACjC,SAAO,kBACH,aAAa,iBAAiB,UAAU,GACxC,KAAA;IACH;EAAC;EAAiB;EAAW;EAAa,CAAC;CAC9C,MAAM,SAAS,cAAc;AAC3B,SAAO,gBAAgB,YAAY,eAAe,CAAC,aAAa,GAAG,KAAA;IAClE;EAAC;EAAW;EAAe;EAAa,CAAC;CAE5C,MAAM,EAAE,UAAU,aAAa,SAAS,mBAAmB,WACzD,gBAAgB,KAAA,IAAY,EAAE,WAAW,cAAc,WAAW,CACnE;CACD,MAAM,WAAW,cAAc;AAC7B,SAAO,gBACH,cACA,iBACE,CAAC,eAAe,GAChB,KAAA;IACL;EAAC;EAAa;EAAgB;EAAc,CAAC;AAyChD,QAAO;EACL,MAxCyB,cAAc;AACvC,OAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,OACtC;AAEF,UAAO,UACH,QAAQ,YAAY,QAAQ,QAAQ,CACrC,QACE,KAAK,YAAY;AAChB,QAAI,QAAQ,SAAS;KACnB,MAAM,gBAAgB,QAAQ,QAC3B,UAAU,QAAQ,cAAc,OAAO,UACzC;AACD,SAAI,eAAe;MACjB,MAAM,aAAa,IAAI,IAAI,cAAc,KAAK,UAAU,MAAM,GAAG,CAAC;MAClE,MAAM,iBAAiB,OAAO,QAAQ,UAAU,CAAC,QAC9C,UAAU,CAAC,YAAY,YAAY;OAClC,MAAM,UAAU,OAAO,WAAW;AAClC,WAAI,WAAW,IAAI,QAAQ,CACzB,UAAS,WAAW;AAEtB,cAAO;SAET,EAAE,CACH;AACD,UAAI,QAAQ,WAAW;OACrB,WAAW,QAAQ;OACnB,QAAQ;OACT;;;AAGL,WAAO;MAET,EAAE,CAIH;KACF;GAAC;GAAU;GAAQ;GAAU,~~CAAC~~;~~EAI/B~~,WAAW;EACZ"}
1	+ {"version":3,"file":"useAccountsBalancesData.js","names":[],"sources":["../../../src/hooks/useAccountsBalancesData.ts"],"sourcesContent":["import type { ChainType, TokenExtended } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { useMemo } from 'react'\nimport type { FormType } from '../stores/form/types.js'\nimport { useChains } from './useChains.js'\nimport { useFilteredTokensByBalance } from './useFilteredByTokenBalances.js'\n\nexport const useAccountsBalancesData = (\n selectedChainId?: number,\n formType?: FormType,\n isAllNetworks?: boolean,\n allTokens?: Record<number, TokenExtended[]>\n): {\n data: Record<string, Record<number, TokenExtended[]>> \| undefined\n isLoading: boolean\n} => {\n const { data: accountsWithTokens, isLoading: isAccountsLoading } =\n useAccountsData(selectedChainId, formType, isAllNetworks, allTokens)\n\n // Filter out EVM tokens that do not have balances\n const { data: filteredTokens, isLoading: isCachedBalancesLoading } =\n useFilteredTokensByBalance(accountsWithTokens, formType)\n\n return {\n data: filteredTokens,\n isLoading: isAccountsLoading \|\| isCachedBalancesLoading,\n }\n}\n\nconst useAccountsData = (\n selectedChainId?: number,\n formType?: FormType,\n isAllNetworks?: boolean,\n allTokens?: Record<number, TokenExtended[]>\n) => {\n const {\n chains: allChains,\n isLoading: isChainsLoading,\n getChainById,\n } = useChains(formType)\n const currentChain = useMemo(() => {\n return selectedChainId\n ? getChainById(selectedChainId, allChains)\n : undefined\n }, [selectedChainId, allChains, getChainById])\n const chains = useMemo(() => {\n return isAllNetworks ? allChains : currentChain ? [currentChain] : undefined\n }, [allChains, isAllNetworks, currentChain])\n\n const { accounts: allAccounts, account: currentAccount } = useAccount(\n isAllNetworks ? undefined : { chainType: currentChain?.chainType }\n )\n const accounts = useMemo(() => {\n return isAllNetworks\n ? allAccounts\n : currentAccount\n ? [currentAccount]\n : undefined\n }, [allAccounts, currentAccount, isAllNetworks])\n\n const accountsWithTokens = useMemo(() => {\n if (!chains \|\| !allTokens \|\| !accounts?.length) {\n return undefined\n }\n return accounts\n ?.filter((account) => account.address)\n .reduce(\n (acc, account) => {\n if (account.address) {\n const accountChains = chains?.filter(\n (chain) => account.chainType === chain?.chainType\n )\n if (accountChains) {\n const chainIdSet = new Set(accountChains.map((chain) => chain.id))\n const filteredTokens = Object.entries(allTokens).reduce(\n (tokenAcc, [chainIdStr, tokens]) => {\n const chainId = Number(chainIdStr)\n if (chainIdSet.has(chainId)) {\n tokenAcc[chainId] = tokens\n }\n return tokenAcc\n },\n {} as { [chainId: number]: TokenExtended[] }\n )\n acc[account.address] = {\n chainType: account.chainType,\n tokens: filteredTokens,\n }\n }\n }\n return acc\n },\n {} as Record<\n string,\n { chainType: ChainType; tokens: Record<number, TokenExtended[]> }\n >\n )\n }, [accounts, chains, allTokens])\n\n return {\n data: accountsWithTokens,\n isLoading: isChainsLoading,\n }\n}\n"],"mappings":";;;;;AAOA,MAAa,2BACX,iBACA,UACA,eACA,cAIG;CACH,MAAM,EAAE,MAAM,oBAAoB,WAAW,sBAC3C,gBAAgB,iBAAiB,UAAU,eAAe,UAAU;CAGtE,MAAM,EAAE,MAAM,gBAAgB,WAAW,4BACvC,2BAA2B,oBAAoB,SAAS;AAE1D,QAAO;EACL,MAAM;EACN,WAAW,qBAAqB;EACjC;;AAGH,MAAM,mBACJ,iBACA,UACA,eACA,cACG;CACH,MAAM,EACJ,QAAQ,WACR,WAAW,iBACX,iBACE,UAAU,SAAS;CACvB,MAAM,eAAe,cAAc;AACjC,SAAO,kBACH,aAAa,iBAAiB,UAAU,GACxC,KAAA;IACH;EAAC;EAAiB;EAAW;EAAa,CAAC;CAC9C,MAAM,SAAS,cAAc;AAC3B,SAAO,gBAAgB,YAAY,eAAe,CAAC,aAAa,GAAG,KAAA;IAClE;EAAC;EAAW;EAAe;EAAa,CAAC;CAE5C,MAAM,EAAE,UAAU,aAAa,SAAS,mBAAmB,WACzD,gBAAgB,KAAA,IAAY,EAAE,WAAW,cAAc,WAAW,CACnE;CACD,MAAM,WAAW,cAAc;AAC7B,SAAO,gBACH,cACA,iBACE,CAAC,eAAe,GAChB,KAAA;IACL;EAAC;EAAa;EAAgB;EAAc,CAAC;AAyChD,QAAO;EACL,MAxCyB,cAAc;AACvC,OAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,OACtC;AAEF,UAAO,UACH,QAAQ,YAAY,QAAQ,QAAQ,CACrC,QACE,KAAK,YAAY;AAChB,QAAI,QAAQ,SAAS;KACnB,MAAM,gBAAgB,QAAQ,QAC3B,UAAU,QAAQ,cAAc,OAAO,UACzC;AACD,SAAI,eAAe;MACjB,MAAM,aAAa,IAAI,IAAI,cAAc,KAAK,UAAU,MAAM,GAAG,CAAC;MAClE,MAAM,iBAAiB,OAAO,QAAQ,UAAU,CAAC,QAC9C,UAAU,CAAC,YAAY,YAAY;OAClC,MAAM,UAAU,OAAO,WAAW;AAClC,WAAI,WAAW,IAAI,QAAQ,CACzB,UAAS,WAAW;AAEtB,cAAO;SAET,EAAE,CACH;AACD,UAAI,QAAQ,WAAW;OACrB,WAAW,QAAQ;OACnB,QAAQ;OACT;;;AAGL,WAAO;MAET,EAAE,CAIH;KACF;GAAC;GAAU;GAAQ;GAAU,CAGN;EACxB,WAAW;EACZ"}

package/dist/esm/hooks/useActionMessage.js CHANGED Viewed

@@ -4,13 +4,13 @@ import { getActionMessage } from "../utils/getActionMessage.js";
 import { getErrorMessage } from "../utils/getErrorMessage.js";
 import { useTranslation } from "react-i18next";
 //#region src/hooks/useActionMessage.ts
-const useActionMessage = (step, action) => {
+const useActionMessage = (step, action, defaultLabelsOnly) => {
 	const { subvariant, subvariantOptions } = useWidgetConfig();
 	const { t } = useTranslation();
 	const { getChainById } = useAvailableChains();
 	if (!step || !action) return {};
 	if (action.status === "FAILED") return getErrorMessage(t, getChainById, step, action);
-	return getActionMessage(t, step, action.type, action.status, action.substatus, subvariant, subvariantOptions);
+	return getActionMessage(t, step, action.type, action.status, action.substatus, defaultLabelsOnly ? void 0 : subvariant, defaultLabelsOnly ? void 0 : subvariantOptions);
 };
 //#endregion
 export { useActionMessage };

package/dist/esm/hooks/useActionMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useActionMessage.js","names":[],"sources":["../../../src/hooks/useActionMessage.ts"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { getActionMessage } from '../utils/getActionMessage.js'\nimport { getErrorMessage } from '../utils/getErrorMessage.js'\nimport { useAvailableChains } from './useAvailableChains.js'\n\nexport const useActionMessage = (\n step?: LiFiStepExtended,\n action?: ExecutionAction\n): { title?: string; message?: string } => {\n const { subvariant, subvariantOptions } = useWidgetConfig()\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n\n if (!step \|\| !action) {\n return {}\n }\n\n if (action.status === 'FAILED') {\n return getErrorMessage(t, getChainById, step, action)\n }\n\n return getActionMessage(\n t,\n step,\n action.type,\n action.status,\n action.substatus,\n subvariant,\n subvariantOptions\n )\n}\n"],"mappings":";;;;;;AAOA,MAAa,oBACX,MACA,~~WACyC~~;CACzC,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,iBAAiB,oBAAoB;AAE7C,KAAI,CAAC,QAAQ,CAAC,OACZ,QAAO,EAAE;AAGX,KAAI,OAAO,WAAW,SACpB,QAAO,gBAAgB,GAAG,cAAc,MAAM,OAAO;AAGvD,QAAO,iBACL,GACA,MACA,OAAO,MACP,OAAO,QACP,OAAO,WACP,~~YACA~~,~~kBACD~~"}
1	+ {"version":3,"file":"useActionMessage.js","names":[],"sources":["../../../src/hooks/useActionMessage.ts"],"sourcesContent":["import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { getActionMessage } from '../utils/getActionMessage.js'\nimport { getErrorMessage } from '../utils/getErrorMessage.js'\nimport { useAvailableChains } from './useAvailableChains.js'\n\nexport const useActionMessage = (\n step?: LiFiStepExtended,\n action?: ExecutionAction,\n defaultLabelsOnly?: boolean\n): { title?: string; message?: string } => {\n const { subvariant, subvariantOptions } = useWidgetConfig()\n const { t } = useTranslation()\n const { getChainById } = useAvailableChains()\n\n if (!step \|\| !action) {\n return {}\n }\n\n if (action.status === 'FAILED') {\n return getErrorMessage(t, getChainById, step, action)\n }\n\n return getActionMessage(\n t,\n step,\n action.type,\n action.status,\n action.substatus,\n defaultLabelsOnly ? undefined : subvariant,\n defaultLabelsOnly ? undefined : subvariantOptions\n )\n}\n"],"mappings":";;;;;;AAOA,MAAa,oBACX,MACA,QACA,sBACyC;CACzC,MAAM,EAAE,YAAY,sBAAsB,iBAAiB;CAC3D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,iBAAiB,oBAAoB;AAE7C,KAAI,CAAC,QAAQ,CAAC,OACZ,QAAO,EAAE;AAGX,KAAI,OAAO,WAAW,SACpB,QAAO,gBAAgB,GAAG,cAAc,MAAM,OAAO;AAGvD,QAAO,iBACL,GACA,MACA,OAAO,MACP,OAAO,QACP,OAAO,WACP,oBAAoB,KAAA,IAAY,YAChC,oBAAoB,KAAA,IAAY,kBACjC"}

package/dist/esm/hooks/useAddressActivity.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAddressActivity.js","names":[],"sources":["../../../src/hooks/useAddressActivity.ts"],"sourcesContent":["import { ChainType } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { useQuery } from '@tanstack/react-query'\nimport { useFieldValues } from '../stores/form/useFieldValues.js'\nimport { useAvailableChains } from './useAvailableChains.js'\n\ninterface AddressActivity {\n hasActivity: boolean\n isLoading: boolean\n isFetched: boolean\n toAddress: string \| undefined\n}\nexport const useAddressActivity = (chainId?: number): AddressActivity => {\n const { getChainById } = useAvailableChains()\n const [toAddress, toChainId] = useFieldValues('toAddress', 'toChain')\n const { getTransactionCount } = useEthereumContext()\n\n const destinationChainId = chainId ?? toChainId\n const toChain = getChainById(destinationChainId)\n\n const {\n data: transactionCount,\n isLoading,\n isFetched,\n error,\n } = useQuery({\n queryKey: ['getTransactionCount', toAddress, destinationChainId],\n queryFn: async () => {\n const count = await getTransactionCount?.(destinationChainId!, toAddress!)\n return count ?? null\n },\n refetchInterval: 300_000,\n staleTime: 300_000,\n enabled:\n toChain?.chainType === ChainType.EVM &&\n !!destinationChainId &&\n !!toAddress &&\n !!getTransactionCount,\n })\n\n return {\n toAddress,\n hasActivity: Boolean(transactionCount && transactionCount > 0),\n isLoading,\n isFetched: isFetched && !error,\n }\n}\n"],"mappings":";;;;;;AAYA,MAAa,sBAAsB,YAAsC;CACvE,MAAM,EAAE,iBAAiB,oBAAoB;CAC7C,MAAM,CAAC,WAAW,aAAa,eAAe,aAAa,UAAU;CACrE,MAAM,EAAE,wBAAwB,oBAAoB;CAEpD,MAAM,qBAAqB,WAAW;CACtC,MAAM,UAAU,aAAa,mBAAmB;CAEhD,MAAM,EACJ,MAAM,kBACN,WACA,WACA,UACE,SAAS;EACX,UAAU;GAAC;GAAuB;GAAW;GAAmB;EAChE,SAAS,YAAY;AAEnB,~~UADc~~,~~MAAM~~,sBAAsB,oBAAqB,UAAW,IAC1D;;EAElB,iBAAiB;EACjB,WAAW;EACX,SACE,SAAS,cAAc,UAAU,OACjC,CAAC,CAAC,sBACF,CAAC,CAAC,aACF,CAAC,CAAC;EACL,CAAC;AAEF,QAAO;EACL;EACA,aAAa,QAAQ,oBAAoB,mBAAmB,EAAE;EAC9D;EACA,WAAW,aAAa,CAAC;EAC1B"}
1	+ {"version":3,"file":"useAddressActivity.js","names":[],"sources":["../../../src/hooks/useAddressActivity.ts"],"sourcesContent":["import { ChainType } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { useQuery } from '@tanstack/react-query'\nimport { useFieldValues } from '../stores/form/useFieldValues.js'\nimport { useAvailableChains } from './useAvailableChains.js'\n\ninterface AddressActivity {\n hasActivity: boolean\n isLoading: boolean\n isFetched: boolean\n toAddress: string \| undefined\n}\nexport const useAddressActivity = (chainId?: number): AddressActivity => {\n const { getChainById } = useAvailableChains()\n const [toAddress, toChainId] = useFieldValues('toAddress', 'toChain')\n const { getTransactionCount } = useEthereumContext()\n\n const destinationChainId = chainId ?? toChainId\n const toChain = getChainById(destinationChainId)\n\n const {\n data: transactionCount,\n isLoading,\n isFetched,\n error,\n } = useQuery({\n queryKey: ['getTransactionCount', toAddress, destinationChainId],\n queryFn: async () => {\n const count = await getTransactionCount?.(destinationChainId!, toAddress!)\n return count ?? null\n },\n refetchInterval: 300_000,\n staleTime: 300_000,\n enabled:\n toChain?.chainType === ChainType.EVM &&\n !!destinationChainId &&\n !!toAddress &&\n !!getTransactionCount,\n })\n\n return {\n toAddress,\n hasActivity: Boolean(transactionCount && transactionCount > 0),\n isLoading,\n isFetched: isFetched && !error,\n }\n}\n"],"mappings":";;;;;;AAYA,MAAa,sBAAsB,YAAsC;CACvE,MAAM,EAAE,iBAAiB,oBAAoB;CAC7C,MAAM,CAAC,WAAW,aAAa,eAAe,aAAa,UAAU;CACrE,MAAM,EAAE,wBAAwB,oBAAoB;CAEpD,MAAM,qBAAqB,WAAW;CACtC,MAAM,UAAU,aAAa,mBAAmB;CAEhD,MAAM,EACJ,MAAM,kBACN,WACA,WACA,UACE,SAAS;EACX,UAAU;GAAC;GAAuB;GAAW;GAAmB;EAChE,SAAS,YAAY;AAEnB,UAAO,MADa,sBAAsB,oBAAqB,UAAW,IAC1D;;EAElB,iBAAiB;EACjB,WAAW;EACX,SACE,SAAS,cAAc,UAAU,OACjC,CAAC,CAAC,sBACF,CAAC,CAAC,aACF,CAAC,CAAC;EACL,CAAC;AAEF,QAAO;EACL;EACA,aAAa,QAAQ,oBAAoB,mBAAmB,EAAE;EAC9D;EACA,WAAW,aAAa,CAAC;EAC1B"}

package/dist/esm/hooks/useAddressValidation.js CHANGED Viewed

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