@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/utils/queries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queries.js","names":[],"sources":["../../../src/utils/queries.ts"],"sourcesContent":["export const getQueryKey = (key: string, prefix?: string) =>\n  `${prefix || 'li.fi'}-widget-${key}`\n"],"mappings":";AAAA,MAAa,eAAe,KAAa,WACvC,GAAG,UAAU,QAAQ,UAAU"}

package/dist/esm/utils/timer.js

@@ -0,0 +1,23 @@
+//#region src/utils/timer.ts
+function getExpiryTimestamp(step) {
+	const { signedAt } = step?.execution ?? {};
+	if (!step || !signedAt) return /* @__PURE__ */ new Date();
+	return new Date(signedAt + step.estimate.executionDuration * 1e3);
+}
+const formatTimer = ({ days = 0, hours = 0, minutes = 0, seconds = 0, locale = "en" }) => {
+	if (typeof Intl.DurationFormat === "function") return new Intl.DurationFormat(locale, {
+		style: "digital",
+		hours: "2-digit",
+		hoursDisplay: "auto"
+	}).format({
+		days,
+		hours,
+		minutes,
+		seconds
+	}).replace(/^:, /, "");
+	return "";
+};
+//#endregion
+export { formatTimer, getExpiryTimestamp };
+
+//# sourceMappingURL=timer.js.map

package/dist/esm/utils/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","names":[],"sources":["../../../src/utils/timer.ts"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\n\nexport function getExpiryTimestamp(step?: LiFiStepExtended): Date {\n  const { signedAt } = step?.execution ?? {}\n  if (!step || !signedAt) {\n    return new Date()\n  }\n  return new Date(signedAt + step.estimate.executionDuration * 1000)\n}\n\nexport const formatTimer = ({\n  days = 0,\n  hours = 0,\n  minutes = 0,\n  seconds = 0,\n  locale = 'en',\n}: {\n  days?: number\n  hours?: number\n  minutes?: number\n  seconds?: number\n  locale?: string\n}): string => {\n  if (typeof (Intl as any).DurationFormat === 'function') {\n    const time = new (Intl as any).DurationFormat(locale, {\n      style: 'digital',\n      hours: '2-digit',\n      hoursDisplay: 'auto',\n    }).format({\n      days,\n      hours,\n      minutes,\n      seconds,\n    })\n    // This handles a fixed bug with Webkit, and Safari\n    // https://github.com/WebKit/WebKit/pull/38357\n    // https://developer.apple.com/documentation/safari-release-notes/safari-18_4-release-notes#JavaScript\n    //\n    // Since most users haven't updated their browsers yet, they would have this issue\n    // it should be safe to remove the check after a while.\n    return time.replace(/^:, /, '')\n  }\n\n  return ''\n}\n"],"mappings":";AAEA,SAAgB,mBAAmB,MAA+B;CAChE,MAAM,EAAE,aAAa,MAAM,aAAa,CAAC;CACzC,IAAI,CAAC,QAAQ,CAAC,UACZ,uBAAO,IAAI,KAAK;CAElB,OAAO,IAAI,KAAK,WAAW,KAAK,SAAS,oBAAoB,GAAI;AACnE;AAEA,MAAa,eAAe,EAC1B,OAAO,GACP,QAAQ,GACR,UAAU,GACV,UAAU,GACV,SAAS,WAOG;CACZ,IAAI,OAAQ,KAAa,mBAAmB,YAiB1C,OAhBa,IAAK,KAAa,eAAe,QAAQ;EACpD,OAAO;EACP,OAAO;EACP,cAAc;CAChB,CAAC,EAAE,OAAO;EACR;EACA;EACA;EACA;CACF,CAOU,EAAE,QAAQ,QAAQ,EAAE;CAGhC,OAAO;AACT"}

package/dist/esm/utils/token.js

@@ -0,0 +1,59 @@
+import { getConfigItemSets, isFormItemAllowed } from "./item.js";
+//#region src/utils/token.ts
+/**
+* Merges verified tokens with search tokens.
+* Verified tokens take priority - search tokens are only added if they don't already exist.
+*/
+const mergeVerifiedWithSearchTokens = (verifiedTokens, searchTokens) => {
+	if (!verifiedTokens) return searchTokens;
+	if (!searchTokens) return verifiedTokens;
+	const result = { ...verifiedTokens };
+	for (const [chainId, tokens] of Object.entries(searchTokens)) {
+		const chainIdNum = Number(chainId);
+		const existingTokens = result[chainIdNum] || [];
+		const existingAddresses = new Set(existingTokens.map((t) => t.address.toLowerCase()));
+		const newTokens = tokens.filter((t) => !existingAddresses.has(t.address.toLowerCase()));
+		if (newTokens.length) result[chainIdNum] = [...existingTokens, ...newTokens];
+	}
+	return result;
+};
+/**
+* Updates a token in the cache by chainId and address.
+* Returns a new cache object with the token updated, or the original if not found.
+*/
+const updateTokenInCache = (data, token) => {
+	if (!data) return data;
+	const chainTokens = data[token.chainId];
+	if (!chainTokens) return data;
+	const index = chainTokens.findIndex((t) => t.address === token.address);
+	if (index < 0) return data;
+	return {
+		...data,
+		[token.chainId]: chainTokens.map((t, i) => i === index ? {
+			...t,
+			...token
+		} : t)
+	};
+};
+const filterAllowedTokens = (dataTokens, configTokens, chainsConfig, formType) => {
+	if (!dataTokens) return;
+	const includedTokens = configTokens?.include || [];
+	const allChainIds = Array.from(new Set([...includedTokens.map((t) => t.chainId), ...Object.keys(dataTokens)])).map((chainId) => Number(chainId));
+	const configChainIdsSet = getConfigItemSets(chainsConfig, (chainIds) => new Set(chainIds), formType);
+	const allowedChainIds = configChainIdsSet ? allChainIds.filter((chainId) => isFormItemAllowed(chainId, configChainIdsSet, formType)) : allChainIds;
+	const allowedTokensByChain = {};
+	for (const chainId of allowedChainIds) {
+		const chainTokens = [...dataTokens[chainId], ...includedTokens.filter((t) => Number(t.chainId) === chainId)];
+		const allowedAddresses = getConfigItemSets(configTokens, (tokens) => new Set(tokens.filter((t) => Number(t.chainId) === chainId).map((t) => t.address.toLowerCase())), formType);
+		allowedTokensByChain[chainId] = chainTokens.filter((token) => isFormItemAllowed(token, allowedAddresses, formType, (t) => t.address.toLowerCase()));
+	}
+	return allowedTokensByChain;
+};
+const getExecutionToToken = (route) => ({
+	...route.steps.at(-1)?.execution?.toToken ?? route.toToken,
+	amount: BigInt(route.steps.at(-1)?.execution?.toAmount ?? route.steps.at(-1)?.estimate.toAmount ?? route.toAmount)
+});
+//#endregion
+export { filterAllowedTokens, getExecutionToToken, mergeVerifiedWithSearchTokens, updateTokenInCache };
+
+//# sourceMappingURL=token.js.map

package/dist/esm/utils/token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token.js","names":[],"sources":["../../../src/utils/token.ts"],"sourcesContent":["import type {\n  BaseToken,\n  RouteExtended,\n  Token,\n  TokenAmount,\n  TokenExtended,\n} from '@lifi/sdk'\nimport type { FormType } from '../stores/form/types.js'\nimport type { TokensByChain } from '../types/token.js'\nimport type { WidgetChains, WidgetTokens } from '../types/widget.js'\nimport { getConfigItemSets, isFormItemAllowed } from './item.js'\n\n/**\n * Merges verified tokens with search tokens.\n * Verified tokens take priority - search tokens are only added if they don't already exist.\n */\nexport const mergeVerifiedWithSearchTokens = (\n  verifiedTokens?: TokensByChain,\n  searchTokens?: TokensByChain\n): TokensByChain | undefined => {\n  if (!verifiedTokens) {\n    return searchTokens\n  }\n  if (!searchTokens) {\n    return verifiedTokens\n  }\n\n  const result = { ...verifiedTokens }\n\n  for (const [chainId, tokens] of Object.entries(searchTokens)) {\n    const chainIdNum = Number(chainId)\n    const existingTokens = result[chainIdNum] || []\n    const existingAddresses = new Set(\n      existingTokens.map((t) => t.address.toLowerCase())\n    )\n\n    const newTokens = tokens.filter(\n      (t) => !existingAddresses.has(t.address.toLowerCase())\n    )\n\n    if (newTokens.length) {\n      result[chainIdNum] = [...existingTokens, ...newTokens]\n    }\n  }\n\n  return result\n}\n\n/**\n * Updates a token in the cache by chainId and address.\n * Returns a new cache object with the token updated, or the original if not found.\n */\nexport const updateTokenInCache = (\n  data: TokensByChain | undefined,\n  token: Token\n): TokensByChain | undefined => {\n  if (!data) {\n    return data\n  }\n  const chainTokens = data[token.chainId]\n  if (!chainTokens) {\n    return data\n  }\n  const index = chainTokens.findIndex((t) => t.address === token.address)\n  if (index < 0) {\n    return data\n  }\n  return {\n    ...data,\n    [token.chainId]: chainTokens.map((t, i) =>\n      i === index ? { ...t, ...token } : t\n    ),\n  }\n}\n\nexport const filterAllowedTokens = (\n  dataTokens: { [chainId: number]: TokenExtended[] } | undefined,\n  configTokens?: WidgetTokens,\n  chainsConfig?: WidgetChains,\n  formType?: FormType\n): { [chainId: number]: TokenExtended[] } | undefined => {\n  if (!dataTokens) {\n    return\n  }\n\n  const includedTokens = configTokens?.include || []\n  const allChainIds = Array.from(\n    new Set([\n      ...includedTokens.map((t) => t.chainId),\n      ...Object.keys(dataTokens),\n    ])\n  ).map((chainId) => Number(chainId))\n\n  const configChainIdsSet = getConfigItemSets(\n    chainsConfig,\n    (chainIds: number[]) => new Set(chainIds),\n    formType\n  )\n\n  const allowedChainIds = configChainIdsSet\n    ? allChainIds.filter((chainId) =>\n        isFormItemAllowed(chainId, configChainIdsSet, formType)\n      )\n    : allChainIds\n\n  const allowedTokensByChain: { [chainId: number]: TokenExtended[] } = {}\n  for (const chainId of allowedChainIds) {\n    const chainTokens = [\n      ...dataTokens[chainId],\n      ...includedTokens.filter((t) => Number(t.chainId) === chainId),\n    ]\n\n    const allowedAddresses = getConfigItemSets(\n      configTokens,\n      (tokens: BaseToken[]) =>\n        new Set(\n          tokens\n            .filter((t) => Number(t.chainId) === chainId)\n            .map((t) => t.address.toLowerCase())\n        ),\n      formType\n    )\n\n    const filtered = chainTokens.filter((token) =>\n      isFormItemAllowed(token, allowedAddresses, formType, (t) =>\n        t.address.toLowerCase()\n      )\n    )\n\n    allowedTokensByChain[chainId] = filtered\n  }\n\n  return allowedTokensByChain\n}\n\nexport const getExecutionToToken = (route: RouteExtended): TokenAmount => ({\n  ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),\n  amount: BigInt(\n    route.steps.at(-1)?.execution?.toAmount ??\n      route.steps.at(-1)?.estimate.toAmount ??\n      route.toAmount\n  ),\n})\n"],"mappings":";;;;;;AAgBA,MAAa,iCACX,gBACA,iBAC8B;CAC9B,IAAI,CAAC,gBACH,OAAO;CAET,IAAI,CAAC,cACH,OAAO;CAGT,MAAM,SAAS,EAAE,GAAG,eAAe;CAEnC,KAAK,MAAM,CAAC,SAAS,WAAW,OAAO,QAAQ,YAAY,GAAG;EAC5D,MAAM,aAAa,OAAO,OAAO;EACjC,MAAM,iBAAiB,OAAO,eAAe,CAAC;EAC9C,MAAM,oBAAoB,IAAI,IAC5B,eAAe,KAAK,MAAM,EAAE,QAAQ,YAAY,CAAC,CACnD;EAEA,MAAM,YAAY,OAAO,QACtB,MAAM,CAAC,kBAAkB,IAAI,EAAE,QAAQ,YAAY,CAAC,CACvD;EAEA,IAAI,UAAU,QACZ,OAAO,cAAc,CAAC,GAAG,gBAAgB,GAAG,SAAS;CAEzD;CAEA,OAAO;AACT;;;;;AAMA,MAAa,sBACX,MACA,UAC8B;CAC9B,IAAI,CAAC,MACH,OAAO;CAET,MAAM,cAAc,KAAK,MAAM;CAC/B,IAAI,CAAC,aACH,OAAO;CAET,MAAM,QAAQ,YAAY,WAAW,MAAM,EAAE,YAAY,MAAM,OAAO;CACtE,IAAI,QAAQ,GACV,OAAO;CAET,OAAO;EACL,GAAG;GACF,MAAM,UAAU,YAAY,KAAK,GAAG,MACnC,MAAM,QAAQ;GAAE,GAAG;GAAG,GAAG;EAAM,IAAI,CACrC;CACF;AACF;AAEA,MAAa,uBACX,YACA,cACA,cACA,aACuD;CACvD,IAAI,CAAC,YACH;CAGF,MAAM,iBAAiB,cAAc,WAAW,CAAC;CACjD,MAAM,cAAc,MAAM,KACxB,IAAI,IAAI,CACN,GAAG,eAAe,KAAK,MAAM,EAAE,OAAO,GACtC,GAAG,OAAO,KAAK,UAAU,CAC3B,CAAC,CACH,EAAE,KAAK,YAAY,OAAO,OAAO,CAAC;CAElC,MAAM,oBAAoB,kBACxB,eACC,aAAuB,IAAI,IAAI,QAAQ,GACxC,QACF;CAEA,MAAM,kBAAkB,oBACpB,YAAY,QAAQ,YAClB,kBAAkB,SAAS,mBAAmB,QAAQ,CACxD,IACA;CAEJ,MAAM,uBAA+D,CAAC;CACtE,KAAK,MAAM,WAAW,iBAAiB;EACrC,MAAM,cAAc,CAClB,GAAG,WAAW,UACd,GAAG,eAAe,QAAQ,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,CAC/D;EAEA,MAAM,mBAAmB,kBACvB,eACC,WACC,IAAI,IACF,OACG,QAAQ,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,EAC3C,KAAK,MAAM,EAAE,QAAQ,YAAY,CAAC,CACvC,GACF,QACF;EAQA,qBAAqB,WANJ,YAAY,QAAQ,UACnC,kBAAkB,OAAO,kBAAkB,WAAW,MACpD,EAAE,QAAQ,YAAY,CACxB,CAGqC;CACzC;CAEA,OAAO;AACT;AAEA,MAAa,uBAAuB,WAAuC;CACzE,GAAI,MAAM,MAAM,GAAG,EAAE,GAAG,WAAW,WAAW,MAAM;CACpD,QAAQ,OACN,MAAM,MAAM,GAAG,EAAE,GAAG,WAAW,YAC7B,MAAM,MAAM,GAAG,EAAE,GAAG,SAAS,YAC7B,MAAM,QACV;AACF"}

package/dist/esm/utils/tokenList.js

@@ -0,0 +1,147 @@
+import { formatUnits } from "@lifi/sdk";
+//#region src/utils/tokenList.ts
+const sortByBalances = (a, b) => Number.parseFloat(formatUnits(b.amount ?? 0n, b.decimals)) * Number.parseFloat(b.priceUSD ?? "0") - Number.parseFloat(formatUnits(a.amount ?? 0n, a.decimals)) * Number.parseFloat(a.priceUSD ?? "0");
+const sortByVolume = (a, b) => (b.volumeUSD24H ?? 0) - (a.volumeUSD24H ?? 0);
+const processTokenBalances = (isBalanceLoading, noCategories, configTokens, selectedChainId, tokens, tokensWithBalances, isPinnedToken) => {
+	if (isBalanceLoading) if (noCategories) {
+		const sortedTokens = [...tokens ?? []].sort(sortByVolume);
+		if (isPinnedToken) {
+			const pinned = [];
+			const notPinned = [];
+			for (const token of sortedTokens) if (isPinnedToken(token.chainId, token.address)) {
+				const pinnedToken = {
+					...token,
+					pinned: true
+				};
+				pinned.push(pinnedToken);
+			} else notPinned.push(token);
+			return {
+				processedTokens: [...pinned, ...notPinned],
+				withCategories: false,
+				withPinnedTokens: !!pinned.length
+			};
+		}
+		return {
+			processedTokens: sortedTokens,
+			withCategories: false,
+			withPinnedTokens: false
+		};
+	} else return processedTypedTokens(tokens ?? [], [], selectedChainId, configTokens, isPinnedToken);
+	const sortedTokensWithBalances = [...tokensWithBalances ?? []].sort(sortByBalances);
+	const tokensWithBalancesSet = new Set(sortedTokensWithBalances.map((token) => `${token.chainId}-${token.address.toLowerCase()}`));
+	const tokensWithoutBalances = tokens?.filter((token) => {
+		const tokenKey = `${token.chainId}-${token.address.toLowerCase()}`;
+		return !tokensWithBalancesSet.has(tokenKey);
+	}).sort(sortByVolume) ?? [];
+	if (noCategories) {
+		if (isPinnedToken) {
+			const pinnedWithBalances = [];
+			const notPinnedWithBalances = [];
+			const pinnedWithoutBalances = [];
+			const notPinnedWithoutBalances = [];
+			for (const token of sortedTokensWithBalances) if (isPinnedToken(token.chainId, token.address)) {
+				const pinnedToken = {
+					...token,
+					pinned: true
+				};
+				pinnedWithBalances.push(pinnedToken);
+			} else notPinnedWithBalances.push(token);
+			for (const token of tokensWithoutBalances) if (isPinnedToken(token.chainId, token.address)) {
+				const pinnedToken = {
+					...token,
+					pinned: true
+				};
+				pinnedWithoutBalances.push(pinnedToken);
+			} else notPinnedWithoutBalances.push(token);
+			return {
+				processedTokens: [
+					...pinnedWithBalances,
+					...pinnedWithoutBalances,
+					...notPinnedWithBalances,
+					...notPinnedWithoutBalances
+				],
+				withCategories: false,
+				withPinnedTokens: !!pinnedWithBalances.length || !!pinnedWithoutBalances.length
+			};
+		}
+		return {
+			processedTokens: [...sortedTokensWithBalances, ...tokensWithoutBalances],
+			withCategories: false,
+			withPinnedTokens: false
+		};
+	} else return processedTypedTokens(tokensWithoutBalances, sortedTokensWithBalances, selectedChainId, configTokens, isPinnedToken);
+};
+const processedTypedTokens = (tokens, tokensWithBalances, selectedChainId, configTokens, isPinnedToken) => {
+	const filteredTokensMap = new Map(tokens.map((token) => [token.address, token]));
+	const pinnedTokens = [];
+	const featuredTokensFromConfig = [];
+	const popularTokensFromConfig = [];
+	["popular", "featured"].forEach((tokenType) => {
+		(configTokens?.[tokenType]?.filter((token) => token.chainId === selectedChainId))?.forEach((token) => {
+			const tokenAmount = { ...token };
+			tokenAmount[tokenType] = true;
+			tokenAmount.verified = true;
+			const match = filteredTokensMap.get(token.address);
+			if (match?.priceUSD) tokenAmount.priceUSD = match.priceUSD;
+			if (!token.logoURI && match?.logoURI) tokenAmount.logoURI = match.logoURI;
+			if (tokenType === "popular") popularTokensFromConfig.push(tokenAmount);
+			else featuredTokensFromConfig.push(tokenAmount);
+			if (isPinnedToken && selectedChainId ? isPinnedToken(selectedChainId, token.address) : false) {
+				const pinnedToken = {
+					...tokenAmount,
+					pinned: true
+				};
+				pinnedTokens.push(pinnedToken);
+			}
+		});
+	});
+	const configTokenAddresses = new Set([...popularTokensFromConfig, ...featuredTokensFromConfig].map((t) => t.address.toLowerCase()));
+	const remainingTokens = tokens.filter((token) => !configTokenAddresses.has(token.address.toLowerCase()));
+	const otherTokens = [];
+	for (const token of remainingTokens) if (isPinnedToken && selectedChainId ? isPinnedToken(selectedChainId, token.address) : false) {
+		const pinnedToken = {
+			...token,
+			pinned: true
+		};
+		pinnedTokens.push(pinnedToken);
+	} else if (token.featured) featuredTokensFromConfig.push(token);
+	else if (token.popular) popularTokensFromConfig.push(token);
+	else otherTokens.push(token);
+	const pinnedTokensWithBalances = [];
+	const nonPinnedTokensWithBalances = [];
+	if (isPinnedToken && selectedChainId) for (const token of tokensWithBalances) if (isPinnedToken(selectedChainId, token.address)) {
+		const pinnedToken = {
+			...token,
+			pinned: true
+		};
+		pinnedTokensWithBalances.push(pinnedToken);
+	} else nonPinnedTokensWithBalances.push(token);
+	else nonPinnedTokensWithBalances.push(...tokensWithBalances);
+	const sortedPinnedTokens = [...pinnedTokens, ...pinnedTokensWithBalances].sort(sortByVolume);
+	const sortedFeaturedTokens = [...featuredTokensFromConfig].sort(sortByVolume);
+	const sortedPopularTokens = [...popularTokensFromConfig].sort(sortByVolume);
+	const sortedOtherTokens = [...otherTokens].sort(sortByVolume);
+	return {
+		processedTokens: [
+			...sortedPinnedTokens,
+			...sortedFeaturedTokens,
+			...nonPinnedTokensWithBalances,
+			...sortedPopularTokens,
+			...sortedOtherTokens
+		],
+		withCategories: !!featuredTokensFromConfig.length || !!popularTokensFromConfig.length,
+		withPinnedTokens: !!sortedPinnedTokens.length
+	};
+};
+const isSearchMatch = (token, search) => {
+	if (!search) return true;
+	const searchLowerCase = search.toLowerCase();
+	return token.name?.toLowerCase().includes(searchLowerCase) || token.symbol?.replaceAll("₮", "T").toLowerCase().includes(searchLowerCase) || token.address?.toLowerCase().includes(searchLowerCase);
+};
+const isSupportedToken = (token) => {
+	return Boolean(token.name && token.symbol && token.priceUSD && token.chainId);
+};
+//#endregion
+export { isSearchMatch, isSupportedToken, processTokenBalances };
+
+//# sourceMappingURL=tokenList.js.map

package/dist/esm/utils/tokenList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenList.js","names":[],"sources":["../../../src/utils/tokenList.ts"],"sourcesContent":["import {\n  formatUnits,\n  type TokenExtended,\n  type WalletTokenExtended,\n} from '@lifi/sdk'\nimport type { TokenAmount, TokenAmountExtended } from '../types/token.js'\nimport type { WidgetTokens } from '../types/widget.js'\n\nconst sortByBalances = (a: TokenAmount, b: TokenAmount) =>\n  Number.parseFloat(formatUnits(b.amount ?? 0n, b.decimals)) *\n    Number.parseFloat(b.priceUSD ?? '0') -\n  Number.parseFloat(formatUnits(a.amount ?? 0n, a.decimals)) *\n    Number.parseFloat(a.priceUSD ?? '0')\n\nconst sortByVolume = (a: TokenExtended, b: TokenExtended) =>\n  (b.volumeUSD24H ?? 0) - (a.volumeUSD24H ?? 0)\n\nexport const processTokenBalances = (\n  isBalanceLoading: boolean,\n  noCategories: boolean,\n  configTokens?: WidgetTokens,\n  selectedChainId?: number,\n  tokens?: TokenExtended[],\n  tokensWithBalances?: TokenAmount[],\n  isPinnedToken?: (chainId: number, tokenAddress: string) => boolean\n): {\n  processedTokens: TokenAmount[]\n  withCategories: boolean\n  withPinnedTokens: boolean\n} => {\n  if (isBalanceLoading) {\n    if (noCategories) {\n      const sortedTokens = [...(tokens ?? [])].sort(sortByVolume)\n      // Separate pinned tokens\n      if (isPinnedToken) {\n        const pinned: TokenAmount[] = []\n        const notPinned: TokenAmount[] = []\n        for (const token of sortedTokens) {\n          if (isPinnedToken(token.chainId, token.address)) {\n            const pinnedToken = { ...token, pinned: true } as TokenAmount\n            pinned.push(pinnedToken)\n          } else {\n            notPinned.push(token)\n          }\n        }\n        return {\n          processedTokens: [...pinned, ...notPinned],\n          withCategories: false,\n          withPinnedTokens: !!pinned.length,\n        }\n      }\n      return {\n        processedTokens: sortedTokens,\n        withCategories: false,\n        withPinnedTokens: false,\n      }\n    } else {\n      return processedTypedTokens(\n        tokens ?? [],\n        [],\n        selectedChainId,\n        configTokens,\n        isPinnedToken\n      )\n    }\n  }\n\n  const sortedTokensWithBalances = [...(tokensWithBalances ?? [])].sort(\n    sortByBalances\n  )\n\n  const tokensWithBalancesSet = new Set(\n    sortedTokensWithBalances.map(\n      (token) => `${token.chainId}-${token.address.toLowerCase()}`\n    )\n  )\n  const tokensWithoutBalances =\n    tokens\n      ?.filter((token) => {\n        const tokenKey = `${token.chainId}-${token.address.toLowerCase()}`\n        return !tokensWithBalancesSet.has(tokenKey)\n      })\n      .sort(sortByVolume) ?? []\n\n  if (noCategories) {\n    // Separate pinned tokens\n    if (isPinnedToken) {\n      const pinnedWithBalances: TokenAmount[] = []\n      const notPinnedWithBalances: TokenAmount[] = []\n      const pinnedWithoutBalances: TokenAmount[] = []\n      const notPinnedWithoutBalances: TokenAmount[] = []\n\n      for (const token of sortedTokensWithBalances) {\n        if (isPinnedToken(token.chainId, token.address)) {\n          const pinnedToken = { ...token, pinned: true } as TokenAmount\n          pinnedWithBalances.push(pinnedToken)\n        } else {\n          notPinnedWithBalances.push(token)\n        }\n      }\n\n      for (const token of tokensWithoutBalances) {\n        if (isPinnedToken(token.chainId, token.address)) {\n          const pinnedToken = { ...token, pinned: true } as TokenAmount\n          pinnedWithoutBalances.push(pinnedToken)\n        } else {\n          notPinnedWithoutBalances.push(token)\n        }\n      }\n\n      return {\n        processedTokens: [\n          ...pinnedWithBalances,\n          ...pinnedWithoutBalances,\n          ...notPinnedWithBalances,\n          ...notPinnedWithoutBalances,\n        ],\n        withCategories: false,\n        withPinnedTokens:\n          !!pinnedWithBalances.length || !!pinnedWithoutBalances.length,\n      }\n    }\n    return {\n      processedTokens: [...sortedTokensWithBalances, ...tokensWithoutBalances],\n      withCategories: false,\n      withPinnedTokens: false,\n    }\n  } else {\n    return processedTypedTokens(\n      tokensWithoutBalances,\n      sortedTokensWithBalances,\n      selectedChainId,\n      configTokens,\n      isPinnedToken\n    )\n  }\n}\n\n// NB: only for non-all-networks\nconst processedTypedTokens = (\n  tokens: TokenAmount[],\n  tokensWithBalances: TokenAmount[],\n  selectedChainId?: number,\n  configTokens?: WidgetTokens,\n  isPinnedToken?: (chainId: number, tokenAddress: string) => boolean\n) => {\n  const filteredTokensMap = new Map(\n    tokens.map((token) => [token.address, token])\n  )\n\n  const pinnedTokens: TokenAmount[] = []\n  const featuredTokensFromConfig: TokenAmount[] = []\n  const popularTokensFromConfig: TokenAmount[] = []\n\n  ;(['popular', 'featured'] as const).forEach((tokenType) => {\n    const typedTokens = configTokens?.[tokenType]?.filter(\n      (token) => token.chainId === selectedChainId\n    )\n\n    typedTokens?.forEach((token) => {\n      const tokenAmount = { ...token } as TokenAmount\n      tokenAmount[tokenType] = true\n      // Config tokens are explicitly set by integrator, mark as verified\n      tokenAmount.verified = true\n\n      const match = filteredTokensMap.get(token.address)\n      if (match?.priceUSD) {\n        tokenAmount.priceUSD = match.priceUSD\n      }\n      if (!token.logoURI && match?.logoURI) {\n        tokenAmount.logoURI = match.logoURI\n      }\n\n      if (tokenType === 'popular') {\n        popularTokensFromConfig.push(tokenAmount)\n      } else {\n        featuredTokensFromConfig.push(tokenAmount)\n      }\n\n      // Additionally add to pinned tokens if it is pinned\n      const isPinned =\n        isPinnedToken && selectedChainId\n          ? isPinnedToken(selectedChainId, token.address)\n          : false\n      if (isPinned) {\n        const pinnedToken = { ...tokenAmount, pinned: true } as TokenAmount\n        pinnedTokens.push(pinnedToken)\n      }\n    })\n  })\n\n  // Filter out config-added tokens from main list\n  const configTokenAddresses = new Set(\n    [...popularTokensFromConfig, ...featuredTokensFromConfig].map((t) =>\n      t.address.toLowerCase()\n    )\n  )\n\n  const remainingTokens = tokens.filter(\n    (token) => !configTokenAddresses.has(token.address.toLowerCase())\n  )\n\n  const otherTokens: TokenAmount[] = []\n\n  // Separate pinned tokens and categorize remaining tokens\n  for (const token of remainingTokens) {\n    const isPinned =\n      isPinnedToken && selectedChainId\n        ? isPinnedToken(selectedChainId, token.address)\n        : false\n\n    if (isPinned) {\n      const pinnedToken = { ...token, pinned: true } as TokenAmount\n      pinnedTokens.push(pinnedToken)\n    } else if (token.featured) {\n      featuredTokensFromConfig.push(token)\n    } else if (token.popular) {\n      popularTokensFromConfig.push(token)\n    } else {\n      otherTokens.push(token)\n    }\n  }\n\n  // Also check tokens with balances for pinned status\n  const pinnedTokensWithBalances: TokenAmount[] = []\n  const nonPinnedTokensWithBalances: TokenAmount[] = []\n\n  if (isPinnedToken && selectedChainId) {\n    for (const token of tokensWithBalances) {\n      if (isPinnedToken(selectedChainId, token.address)) {\n        const pinnedToken = { ...token, pinned: true } as TokenAmount\n        pinnedTokensWithBalances.push(pinnedToken)\n      } else {\n        nonPinnedTokensWithBalances.push(token)\n      }\n    }\n  } else {\n    nonPinnedTokensWithBalances.push(...tokensWithBalances)\n  }\n\n  const sortedPinnedTokens = [\n    ...pinnedTokens,\n    ...pinnedTokensWithBalances,\n  ].sort(sortByVolume)\n  const sortedFeaturedTokens = [...featuredTokensFromConfig].sort(sortByVolume)\n  const sortedPopularTokens = [...popularTokensFromConfig].sort(sortByVolume)\n  const sortedOtherTokens = [...otherTokens].sort(sortByVolume)\n\n  return {\n    processedTokens: [\n      ...sortedPinnedTokens,\n      ...sortedFeaturedTokens,\n      ...nonPinnedTokensWithBalances,\n      ...sortedPopularTokens,\n      ...sortedOtherTokens,\n    ],\n    withCategories:\n      !!featuredTokensFromConfig.length || !!popularTokensFromConfig.length,\n    withPinnedTokens: !!sortedPinnedTokens.length,\n  }\n}\n\nexport const isSearchMatch = (\n  token: TokenExtended | TokenAmountExtended,\n  search?: string\n): boolean => {\n  if (!search) {\n    return true\n  }\n\n  const searchLowerCase = search.toLowerCase()\n  return (\n    token.name?.toLowerCase().includes(searchLowerCase) ||\n    token.symbol\n      ?.replaceAll('₮', 'T')\n      .toLowerCase()\n      .includes(searchLowerCase) ||\n    token.address?.toLowerCase().includes(searchLowerCase)\n  )\n}\n\nexport const isSupportedToken = (token: WalletTokenExtended): boolean => {\n  return Boolean(token.name && token.symbol && token.priceUSD && token.chainId)\n}\n"],"mappings":"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"}

package/dist/esm/utils/variant.js

@@ -0,0 +1,10 @@
+//#region src/utils/variant.ts
+const getSplitMode = (split) => {
+	if (!split) return "swap";
+	if (typeof split === "string") return split;
+	return split.defaultTab;
+};
+//#endregion
+export { getSplitMode };
+
+//# sourceMappingURL=variant.js.map

package/dist/esm/utils/variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.js","names":[],"sources":["../../../src/utils/variant.ts"],"sourcesContent":["import type { SplitMode, SplitModeOptions } from '../types/widget.js'\n\nexport const getSplitMode = (\n  split?: SplitMode | SplitModeOptions\n): SplitMode => {\n  if (!split) {\n    return 'swap'\n  }\n  if (typeof split === 'string') {\n    return split\n  }\n  return split.defaultTab\n}\n"],"mappings":";AAEA,MAAa,gBACX,UACc;CACd,IAAI,CAAC,OACH,OAAO;CAET,IAAI,OAAO,UAAU,UACnB,OAAO;CAET,OAAO,MAAM;AACf"}

package/dist/esm/utils/wallet.js

@@ -0,0 +1,6 @@
+//#region src/utils/wallet.ts
+const shortenAddress = (address) => address ? `${address.substring(0, 7)}...${address.substring(address.length - 5)}` : null;
+//#endregion
+export { shortenAddress };
+
+//# sourceMappingURL=wallet.js.map

package/dist/esm/utils/wallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallet.js","names":[],"sources":["../../../src/utils/wallet.ts"],"sourcesContent":["export const shortenAddress = (address?: string): string | null =>\n  address\n    ? `${address.substring(0, 7)}...${address.substring(address.length - 5)}`\n    : null\n"],"mappings":";AAAA,MAAa,kBAAkB,YAC7B,UACI,GAAG,QAAQ,UAAU,GAAG,CAAC,EAAE,KAAK,QAAQ,UAAU,QAAQ,SAAS,CAAC,MACpE"}

package/dist/esm/utils/widgetSize.js

@@ -0,0 +1,11 @@
+import "../config/constants.js";
+//#region src/utils/widgetSize.ts
+const getWidgetMaxHeight = (theme) => {
+	if (theme?.container?.maxHeight) return theme?.container?.maxHeight;
+	if (theme?.container?.height && theme?.container?.height !== "fit-content") return theme?.container?.height;
+	return 686;
+};
+//#endregion
+export { getWidgetMaxHeight };
+
+//# sourceMappingURL=widgetSize.js.map

package/dist/esm/utils/widgetSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgetSize.js","names":[],"sources":["../../../src/utils/widgetSize.ts"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { defaultMaxHeight } from '../config/constants.js'\nimport type { WidgetTheme } from '../types/widget.js'\n\nexport const getWidgetMaxHeight = (\n  theme: Theme | WidgetTheme | undefined\n): number | string => {\n  if (theme?.container?.maxHeight) {\n    return theme?.container?.maxHeight\n  }\n\n  if (theme?.container?.height && theme?.container?.height !== 'fit-content') {\n    return theme?.container?.height\n  }\n\n  return defaultMaxHeight\n}\n"],"mappings":";;AAIA,MAAa,sBACX,UACoB;CACpB,IAAI,OAAO,WAAW,WACpB,OAAO,OAAO,WAAW;CAG3B,IAAI,OAAO,WAAW,UAAU,OAAO,WAAW,WAAW,eAC3D,OAAO,OAAO,WAAW;CAG3B,OAAA;AACF"}

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@lifi/widget",
+  "version": "0.0.0-preview-6cc63bac",
+  "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
+  "type": "module",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "sideEffects": false,
+  "author": "Eugene Chybisov <eugene@li.finance>",
+  "homepage": "https://github.com/lifinance/widget",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lifinance/widget.git",
+    "directory": "packages/widget"
+  },
+  "bugs": {
+    "url": "https://github.com/lifinance/widget/issues"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    "widget",
+    "lifi-widget",
+    "bridge",
+    "swap",
+    "cross-chain",
+    "multi-chain",
+    "ethereum",
+    "solana",
+    "bitcoin",
+    "sui",
+    "web3",
+    "lifi"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@lifi/sdk": "^4.0.0",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
+    "@mui/system": "^9.0.1",
+    "@tanstack/react-router": "^1.170.10",
+    "@tanstack/react-virtual": "^3.14.2",
+    "eventemitter3": "^5.0.4",
+    "i18next": "^26.3.0",
+    "microdiff": "^1.5.0",
+    "motion": "^12.38.0",
+    "react-i18next": "^17.0.8",
+    "react-intersection-observer": "^10.0.3",
+    "react-transition-group": "^4.4.5",
+    "zustand": "^5.0.14",
+    "@lifi/wallet-management": "4.0.0",
+    "@lifi/widget-provider": "4.0.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5.90.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "module": "./dist/esm/index.js",
+  "typesVersions": {
+    "*": {
+      "skeleton": [
+        "./dist/esm/components/Skeleton/WidgetSkeleton.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist/**",
+    "!dist/**/*.tsbuildinfo",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "!src/**/*.spec.ts",
+    "!src/**/*.test.ts",
+    "!src/**/*.mock.ts",
+    "!src/**/*.handlers.ts",
+    "!src/**/*.tsbuildinfo",
+    "!**/__mocks__/**",
+    "!*.tmp",
+    "!*.env",
+    "!tsconfig.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/esm/components/Skeleton/WidgetSkeleton.d.ts",
+      "import": "./dist/esm/components/Skeleton/WidgetSkeleton.js",
+      "default": "./dist/esm/components/Skeleton/WidgetSkeleton.js"
+    },
+    "./package.json": "./package.json"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,48 @@
+'use client'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+import { forwardRef, useMemo } from 'react'
+import { AppDefault } from './AppDefault.js'
+import type { WidgetDrawer } from './AppDrawer.js'
+import { AppDrawer } from './AppDrawer.js'
+import { AppProvider } from './AppProvider.js'
+import type { WidgetConfig, WidgetProps } from './types/widget.js'
+
+export const App: ForwardRefExoticComponent<
+  WidgetProps & RefAttributes<WidgetDrawer>
+> = forwardRef<WidgetDrawer, WidgetProps>((props, ref) => {
+  const config: WidgetConfig = useMemo(() => {
+    const config = { ...props, ...props.config }
+    if (config.variant === 'drawer') {
+      config.theme = {
+        ...config.theme,
+        container: {
+          height: '100%',
+          ...config.theme?.container,
+        },
+      }
+    }
+    return config
+  }, [props])
+
+  if (config.variant === 'drawer') {
+    return (
+      <AppProvider config={config} formRef={props.formRef}>
+        <AppDrawer
+          ref={ref}
+          elementRef={props.elementRef}
+          config={config}
+          open={props.open}
+          onClose={props.onClose}
+        >
+          <AppDefault />
+        </AppDrawer>
+      </AppProvider>
+    )
+  }
+
+  return (
+    <AppProvider config={config} formRef={props.formRef}>
+      <AppDefault />
+    </AppProvider>
+  )
+})