@avail-project/widgets 0.0.1

package/dist/nexus-widget/utils/citrea-tokens.js

@@ -0,0 +1,136 @@
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+import { CHAIN_METADATA } from "../../common";
+import { getShortChainName } from "../../common/utils/constant";
+export const CITREA_CHAIN_ID = 4114;
+const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+const E_ADDRESS = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+const CITREA_CHAIN_FALLBACK = {
+    logo: "https://raw.githubusercontent.com/availproject/nexus-assets/main/chains/citrea/logo.png",
+    name: "Citrea Mainnet",
+};
+export const CITREA_STABLE_SYMBOLS = [
+    "ctUSD",
+    "USDC.e",
+    "JUSD",
+    "svJUSD",
+    "GUSD",
+    "USDT.e",
+];
+export const CITREA_LOCAL_TOKENS = [
+    {
+        address: ZERO_ADDRESS,
+        decimals: 18,
+        logo: "https://assets.coingecko.com/coins/images/102172844/standard/cBTC.png",
+        name: "Citrea Bitcoin",
+        symbol: "cBTC",
+        type: "NATIVE",
+    },
+    {
+        address: "0x3100000000000000000000000000000000000006",
+        decimals: 18,
+        logo: "https://assets.coingecko.com/coins/images/102172843/standard/cBTC.png",
+        name: "Wrapped Citrea Bitcoin",
+        symbol: "wcBTC",
+    },
+    {
+        address: "0x8D82c4E3c936C7B5724A382a9c5a4E6Eb7aB6d5D",
+        decimals: 6,
+        logo: "https://assets.coingecko.com/coins/images/71615/standard/ctUSD.png",
+        name: "Citrea USD",
+        symbol: "ctUSD",
+        type: "STABLE",
+    },
+    {
+        address: "0xE045e6c36cF77FAA2CfB54466D71A3aEF7bbE839",
+        decimals: 6,
+        logo: "https://assets.coingecko.com/coins/images/6319/standard/USDC.png",
+        name: "Bridged USDC",
+        symbol: "USDC.e",
+        type: "STABLE",
+    },
+    {
+        address: "0x0987D3720D38847ac6dBB9D025B9dE892a3CA35C",
+        decimals: 18,
+        logo: "https://assets.coingecko.com/coins/images/102172725/standard/JUSD_192x192_App_Icon.png",
+        name: "Juice Dollar",
+        symbol: "JUSD",
+        type: "STABLE",
+    },
+    {
+        address: "0x384157027B1CDEAc4e26e3709667BB28735379Bb",
+        decimals: 8,
+        logo: "https://assets.coingecko.com/coins/images/102172893/standard/syBTC.png",
+        name: "Symbiosis BTC",
+        symbol: "syBTC",
+    },
+    {
+        address: "0x1b70ae756b1089cc5948e4f8a2AD498DF30E897d",
+        decimals: 18,
+        logo: "https://assets.coingecko.com/coins/images/102172892/standard/JuiceDollar_Coinlogo.png",
+        name: "Savings Vault JUSD",
+        symbol: "svJUSD",
+        type: "STABLE",
+    },
+    {
+        address: "0xAC8c1AEB584765DB16ac3e08D4736CFcE198589B",
+        decimals: 18,
+        logo: "https://assets.coingecko.com/coins/images/71672/large/GUSD.png",
+        name: "Generic Dollar",
+        symbol: "GUSD",
+        type: "STABLE",
+    },
+    {
+        address: "0xDF240DC08B0FdaD1d93b74d5048871232f6BEA3d",
+        decimals: 8,
+        logo: "https://coin-images.coingecko.com/coins/images/7598/large/WBTCLOGO.png",
+        name: "Bridged Wrapped Bitcoin",
+        symbol: "WBTC.e",
+    },
+    {
+        address: "0x9f3096Bac87e7F03DC09b0B416eB0DF837304dc4",
+        decimals: 6,
+        logo: "https://coin-images.coingecko.com/coins/images/325/large/Tether.png",
+        name: "Bridged USDT",
+        symbol: "USDT.e",
+        type: "STABLE",
+    },
+];
+const normalizeAddress = (address) => {
+    const lower = address?.toLowerCase();
+    if (!lower)
+        return "";
+    if (lower === E_ADDRESS)
+        return ZERO_ADDRESS;
+    return lower;
+};
+export const getCitreaChainMeta = () => ({
+    logo: CHAIN_METADATA[CITREA_CHAIN_ID]?.logo ?? CITREA_CHAIN_FALLBACK.logo,
+    name: getShortChainName(CITREA_CHAIN_ID, CHAIN_METADATA[CITREA_CHAIN_ID]?.name ?? CITREA_CHAIN_FALLBACK.name),
+});
+export const getCitreaReceiveTokenOptions = () => {
+    const chain = getCitreaChainMeta();
+    return CITREA_LOCAL_TOKENS.map((token) => ({
+        balance: `0 ${token.symbol}`,
+        balanceInFiat: "$0.00",
+        chainId: CITREA_CHAIN_ID,
+        chainLogo: chain.logo,
+        chainName: chain.name,
+        contractAddress: token.address,
+        decimals: token.decimals,
+        logo: token.logo,
+        name: token.name,
+        symbol: token.symbol,
+    }));
+};
+export const findCitreaReceiveToken = ({ address, chainId, symbol, }) => {
+    if (chainId !== CITREA_CHAIN_ID)
+        return undefined;
+    const normalizedAddress = normalizeAddress(address);
+    const normalizedSymbol = symbol?.toLowerCase();
+    return getCitreaReceiveTokenOptions().find((token) => {
+        const addressMatches = normalizedAddress &&
+            normalizeAddress(token.contractAddress) === normalizedAddress;
+        const symbolMatches = normalizedSymbol && token.symbol.toLowerCase() === normalizedSymbol;
+        return Boolean(addressMatches || symbolMatches);
+    });
+};

package/dist/nexus-widget/utils/deposit-source-selection.d.ts

@@ -0,0 +1,55 @@
+import { type Hex } from "viem";
+import type { UserAsset } from "../../nexus/NexusProvider";
+export type DepositSourceFilter = "all" | "stablecoins" | "native" | "custom";
+type DepositSourceDestination = {
+    chainId: number;
+    tokenAddress: `0x${string}`;
+    tokenSymbol: string;
+};
+export declare const getDepositSourceId: (tokenAddress: string, chainId: number) => string;
+export declare const parseDepositSourceId: (sourceId: string) => {
+    tokenAddress: Hex;
+    chainId: number;
+} | null;
+export declare const buildDepositSourcePoolIds: (params: {
+    swapBalance: UserAsset[] | null;
+    filter: DepositSourceFilter;
+    selectedSourceIds: Iterable<string>;
+    isManualSelection: boolean;
+}) => string[];
+export declare const buildPrioritySelectedSourceIds: (params: {
+    swapBalance: UserAsset[] | null;
+    destination: DepositSourceDestination;
+    minimumBalanceUsd: number;
+    targetAmountUsd?: number;
+    sourceIds?: Iterable<string>;
+}) => string[];
+export declare const buildSortedFromSources: (params: {
+    sourceIds: Iterable<string>;
+    swapBalance: UserAsset[] | null;
+    destination: DepositSourceDestination;
+    minimumBalanceUsd?: number;
+}) => Array<{
+    tokenAddress: Hex;
+    chainId: number;
+}>;
+export interface ResolvedDepositSourceSelection {
+    fromSources: Array<{
+        tokenAddress: Hex;
+        chainId: number;
+    }>;
+    selectedSourceIds: string[];
+    sourcePoolIds: string[];
+}
+export declare const resolveDepositSourceSelection: (params: {
+    swapBalance: UserAsset[] | null;
+    destination: DepositSourceDestination;
+    filter: DepositSourceFilter;
+    selectedSourceIds: Iterable<string>;
+    isManualSelection: boolean;
+    minimumBalanceUsd: number;
+    targetAmountUsd?: number;
+    excludedSourceIds?: Iterable<string>;
+}) => ResolvedDepositSourceSelection;
+export {};
+//# sourceMappingURL=deposit-source-selection.d.ts.map

package/dist/nexus-widget/utils/deposit-source-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deposit-source-selection.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/utils/deposit-source-selection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAU,MAAM,MAAM,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9E,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,KAAK,MAAM,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AA2CF,eAAO,MAAM,kBAAkB,GAC7B,cAAc,MAAM,EACpB,SAAS,MAAM,KACd,MAAsC,CAAC;AAE1C,eAAO,MAAM,oBAAoB,GAC/B,UAAU,MAAM,KACf;IAAE,YAAY,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,IAS3C,CAAC;AAiHF,eAAO,MAAM,yBAAyB,GAAI,QAAQ;IAChD,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACpC,iBAAiB,EAAE,OAAO,CAAC;CAC5B,KAAG,MAAM,EA8BT,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,QAAQ;IACrD,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,wBAAwB,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC9B,KAAG,MAAM,EAoDT,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,QAAQ;IAC7C,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,wBAAwB,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,KAAG,KAAK,CAAC;IAAE,YAAY,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAGsB,CAAC;AAEvE,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,KAAK,CAAC;QAAE,YAAY,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,6BAA6B,GAAI,QAAQ;IACpD,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,wBAAwB,CAAC;IACtC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACpC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACtC,KAAG,8BA6CH,CAAC"}

package/dist/nexus-widget/utils/deposit-source-selection.js

@@ -0,0 +1,219 @@
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+import { padHex } from "viem";
+import { CHAIN_METADATA } from "../../common";
+const STABLECOIN_SYMBOLS = ["USDC", "USDT", "DAI", "TUSD", "USDP"];
+const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+const EVM_NATIVE_PLACEHOLDER = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+const MAX_PRIORITY_RANK = Number.MAX_SAFE_INTEGER;
+const sortSourcesByPriority = (swapBalance, _destination) => swapBalance
+    .flatMap((asset) => asset.breakdown ?? [])
+    .sort((a, b) => parseNonNegativeNumber(b.balanceInFiat) -
+    parseNonNegativeNumber(a.balanceInFiat))
+    .map((breakdown) => ({
+    chainID: breakdown.chain.id,
+    tokenAddress: breakdown.contractAddress,
+}));
+const parseNonNegativeNumber = (value) => {
+    const parsed = Number.parseFloat(String(value));
+    if (!Number.isFinite(parsed) || parsed < 0)
+        return 0;
+    return parsed;
+};
+const normalizeAddress = (address) => address.toLowerCase();
+const toComparableSdkAddress = (address) => {
+    const normalized = normalizeAddress(address);
+    const effectiveAddress = normalized === ZERO_ADDRESS ? EVM_NATIVE_PLACEHOLDER : normalized;
+    try {
+        return padHex(effectiveAddress, { size: 32 }).toLowerCase();
+    }
+    catch {
+        return effectiveAddress;
+    }
+};
+export const getDepositSourceId = (tokenAddress, chainId) => `${tokenAddress}-${chainId}`;
+export const parseDepositSourceId = (sourceId) => {
+    const separatorIndex = sourceId.lastIndexOf("-");
+    if (separatorIndex <= 0)
+        return null;
+    const tokenAddress = sourceId.slice(0, separatorIndex);
+    const chainId = Number.parseInt(sourceId.slice(separatorIndex + 1), 10);
+    if (!Number.isInteger(chainId) || chainId <= 0)
+        return null;
+    return { tokenAddress, chainId };
+};
+const isStablecoin = (symbol) => STABLECOIN_SYMBOLS.includes((symbol ?? "").toUpperCase());
+const isNative = (symbol) => {
+    const normalized = (symbol ?? "").toUpperCase();
+    if (!normalized)
+        return false;
+    return Object.values(CHAIN_METADATA).some((chain) => chain.nativeCurrency.symbol.toUpperCase() === normalized);
+};
+const getFiatLookupKey = (tokenAddress, chainId) => `${normalizeAddress(tokenAddress)}-${chainId}`;
+const getPriorityLookupKey = (tokenAddress, chainId) => `${toComparableSdkAddress(tokenAddress)}-${chainId}`;
+const buildSourceFiatByKeyMap = (swapBalance) => {
+    const map = new Map();
+    if (!swapBalance)
+        return map;
+    for (const asset of swapBalance) {
+        for (const breakdown of asset.breakdown ?? []) {
+            const chainId = breakdown.chain?.id;
+            const tokenAddress = breakdown.contractAddress;
+            if (!chainId || !tokenAddress)
+                continue;
+            map.set(getFiatLookupKey(tokenAddress, chainId), parseNonNegativeNumber(breakdown.balanceInFiat));
+        }
+    }
+    return map;
+};
+const buildPriorityRankMap = (swapBalance, destination) => {
+    const map = new Map();
+    if (!swapBalance?.length)
+        return map;
+    const sortedSources = sortSourcesByPriority(swapBalance, destination);
+    sortedSources.forEach((source, index) => {
+        map.set(getPriorityLookupKey(source.tokenAddress, source.chainID), index);
+    });
+    return map;
+};
+const buildSortedSourceCandidates = (params) => {
+    const { sourceIds, swapBalance, destination, minimumBalanceUsd } = params;
+    const uniqueIds = [...new Set(sourceIds)];
+    if (uniqueIds.length === 0)
+        return [];
+    const sourceFiatByKeyMap = buildSourceFiatByKeyMap(swapBalance);
+    const priorityRankMap = buildPriorityRankMap(swapBalance, destination);
+    return uniqueIds
+        .map((sourceId) => {
+        const parsed = parseDepositSourceId(sourceId);
+        if (!parsed)
+            return null;
+        const fiatKey = getFiatLookupKey(parsed.tokenAddress, parsed.chainId);
+        const priorityKey = getPriorityLookupKey(parsed.tokenAddress, parsed.chainId);
+        return {
+            sourceId,
+            balanceInFiat: sourceFiatByKeyMap.get(fiatKey) ?? 0,
+            priorityRank: priorityRankMap.get(priorityKey) ?? MAX_PRIORITY_RANK,
+        };
+    })
+        .filter((item) => {
+        if (!item)
+            return false;
+        if (minimumBalanceUsd == null)
+            return true;
+        return item.balanceInFiat >= minimumBalanceUsd;
+    })
+        .sort((a, b) => {
+        if (a.priorityRank !== b.priorityRank) {
+            return a.priorityRank - b.priorityRank;
+        }
+        if (a.balanceInFiat !== b.balanceInFiat) {
+            return b.balanceInFiat - a.balanceInFiat;
+        }
+        return a.sourceId.localeCompare(b.sourceId);
+    });
+};
+const sortSourceIdsByPriority = (params) => buildSortedSourceCandidates(params).map((item) => item.sourceId);
+export const buildDepositSourcePoolIds = (params) => {
+    const { swapBalance, filter, selectedSourceIds, isManualSelection } = params;
+    const selectedSourceIdSet = new Set(selectedSourceIds);
+    if (isManualSelection) {
+        return [...selectedSourceIdSet];
+    }
+    const sourceIds = new Set();
+    swapBalance?.forEach((asset) => {
+        asset.breakdown?.forEach((breakdown) => {
+            const chainId = breakdown.chain?.id;
+            const tokenAddress = breakdown.contractAddress;
+            if (!chainId || !tokenAddress)
+                return;
+            const stable = isStablecoin(breakdown.symbol ?? asset.symbol);
+            const native = isNative(breakdown.symbol ?? asset.symbol);
+            const sourceId = getDepositSourceId(tokenAddress, chainId);
+            const include = filter === "all" ||
+                (filter === "stablecoins" && stable) ||
+                (filter === "native" && native) ||
+                (filter === "custom" && selectedSourceIdSet.has(sourceId));
+            if (include)
+                sourceIds.add(sourceId);
+        });
+    });
+    return [...sourceIds];
+};
+export const buildPrioritySelectedSourceIds = (params) => {
+    const { swapBalance, destination, minimumBalanceUsd, targetAmountUsd, sourceIds, } = params;
+    const requestedSourceIds = sourceIds ? [...new Set(sourceIds)] : undefined;
+    const orderedCandidateSourceIds = requestedSourceIds
+        ? sortSourceIdsByPriority({
+            sourceIds: requestedSourceIds,
+            swapBalance,
+            destination,
+            minimumBalanceUsd,
+        })
+        : sortSourceIdsByPriority({
+            sourceIds: buildDepositSourcePoolIds({
+                swapBalance,
+                filter: "all",
+                selectedSourceIds: [],
+                isManualSelection: false,
+            }),
+            swapBalance,
+            destination,
+            minimumBalanceUsd,
+        });
+    if (orderedCandidateSourceIds.length === 0)
+        return [];
+    const normalizedTargetAmountUsd = parseNonNegativeNumber(targetAmountUsd);
+    if (normalizedTargetAmountUsd <= 0)
+        return [orderedCandidateSourceIds[0]];
+    const sourceFiatByKeyMap = buildSourceFiatByKeyMap(swapBalance);
+    const selectedSourceIds = [];
+    let runningTotalUsd = 0;
+    for (const sourceId of orderedCandidateSourceIds) {
+        const parsed = parseDepositSourceId(sourceId);
+        if (!parsed)
+            continue;
+        selectedSourceIds.push(sourceId);
+        runningTotalUsd +=
+            sourceFiatByKeyMap.get(getFiatLookupKey(parsed.tokenAddress, parsed.chainId)) ?? 0;
+        if (runningTotalUsd >= normalizedTargetAmountUsd)
+            break;
+    }
+    return selectedSourceIds;
+};
+export const buildSortedFromSources = (params) => sortSourceIdsByPriority(params)
+    .map((sourceId) => parseDepositSourceId(sourceId))
+    .filter((item) => Boolean(item));
+export const resolveDepositSourceSelection = (params) => {
+    const { swapBalance, destination, excludedSourceIds, filter, selectedSourceIds, isManualSelection, minimumBalanceUsd, targetAmountUsd, } = params;
+    const excludedSourceIdSet = new Set(excludedSourceIds ?? []);
+    const sourcePoolIds = buildDepositSourcePoolIds({
+        swapBalance,
+        filter,
+        selectedSourceIds,
+        isManualSelection,
+    }).filter((sourceId) => !excludedSourceIdSet.has(sourceId));
+    const resolvedSelectedSourceIds = isManualSelection
+        ? sortSourceIdsByPriority({
+            sourceIds: sourcePoolIds,
+            swapBalance,
+            destination,
+            minimumBalanceUsd,
+        })
+        : buildPrioritySelectedSourceIds({
+            swapBalance,
+            destination,
+            minimumBalanceUsd,
+            targetAmountUsd,
+            sourceIds: sourcePoolIds,
+        });
+    return {
+        sourcePoolIds,
+        selectedSourceIds: resolvedSelectedSourceIds,
+        fromSources: buildSortedFromSources({
+            sourceIds: resolvedSelectedSourceIds,
+            swapBalance,
+            destination,
+            minimumBalanceUsd,
+        }),
+    };
+};

package/dist/swaps/components/stacked-token-icons.d.ts

@@ -0,0 +1,15 @@
+type StackedIconSize = "sm" | "md" | "lg";
+interface TokenSource {
+    tokenLogo?: string;
+    chainLogo?: string;
+    symbol?: string;
+}
+interface StackedTokenIconsProps {
+    sources: TokenSource[];
+    size?: StackedIconSize;
+    maxDisplay?: number;
+    className?: string;
+}
+export declare const StackedTokenIcons: ({ sources, size, maxDisplay, className, }: StackedTokenIconsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=stacked-token-icons.d.ts.map

package/dist/swaps/components/stacked-token-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-token-icons.d.ts","sourceRoot":"","sources":["../../../.build-src/swaps/components/stacked-token-icons.tsx"],"names":[],"mappings":"AAIA,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAc1C,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,GAAI,2CAK/B,sBAAsB,4CAwFxB,CAAC"}

package/dist/swaps/components/stacked-token-icons.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const SIZE_MAP = {
+    sm: 24,
+    md: 32,
+    lg: 40,
+};
+const OVERLAP_MAP = {
+    sm: 12,
+    md: 16,
+    lg: 20,
+};
+export const StackedTokenIcons = ({ sources, size = "md", maxDisplay = 4, className, }) => {
+    const dimension = SIZE_MAP[size];
+    const overlap = OVERLAP_MAP[size];
+    const displaySources = sources.slice(0, maxDisplay);
+    const remainingCount = sources.length - maxDisplay;
+    // Calculate total width based on number of icons
+    const totalWidth = displaySources.length > 0
+        ? dimension + (displaySources.length - 1) * (dimension - overlap)
+        : 0;
+    return (_jsxs("span", { className: cn("relative inline-flex items-center", className), style: { width: totalWidth, height: dimension }, children: [displaySources.map((source, index) => (_jsx("span", { className: "absolute inline-flex", style: {
+                    left: index * (dimension - overlap),
+                    zIndex: displaySources.length - index,
+                }, children: _jsxs("span", { className: "relative inline-flex", children: [source.tokenLogo ? (_jsx("img", { src: source.tokenLogo, alt: source.symbol ?? "token", width: dimension, height: dimension, className: "rounded-full object-cover border-2 border-background" })) : (_jsx("span", { className: cn("rounded-full bg-ring/80 text-muted-foreground flex items-center justify-center font-semibold uppercase border-2 border-background", {
+                                "h-6 w-6 text-xs": size === "sm",
+                                "h-8 w-8 text-sm": size === "md",
+                                "h-10 w-10 text-base": size === "lg",
+                            }), children: source.symbol?.charAt(0) ?? "?" })), source.chainLogo && (_jsx("span", { className: "absolute -bottom-0.5 -right-0.5 rounded-full border border-background bg-background", children: _jsx("img", { src: source.chainLogo, alt: "chain logo", width: Math.max(12, dimension * 0.35), height: Math.max(12, dimension * 0.35), className: "rounded-full object-cover" }) }))] }) }, `${source.symbol}-${index}`))), remainingCount > 0 && (_jsx("span", { className: "absolute inline-flex", style: {
+                    left: displaySources.length * (dimension - overlap),
+                    zIndex: 0,
+                }, children: _jsxs("span", { className: cn("rounded-full bg-muted text-muted-foreground flex items-center justify-center font-medium border-2 border-background", {
+                        "h-6 w-6 text-[10px]": size === "sm",
+                        "h-8 w-8 text-xs": size === "md",
+                        "h-10 w-10 text-sm": size === "lg",
+                    }), children: ["+", remainingCount] }) }))] }));
+};

package/dist/swaps/components/step-flow.d.ts

@@ -0,0 +1,32 @@
+import { type FC } from "react";
+import { type DisplayStep } from "./transaction-progress";
+interface TokenSource {
+    tokenLogo: string;
+    chainLogo: string;
+    symbol: string;
+}
+interface StepFlowProps {
+    steps: DisplayStep[];
+    currentIndex: number;
+    totalSteps: number;
+    explorerUrls: {
+        sourceExplorerUrl: string | null;
+        destinationExplorerUrl: string | null;
+    };
+    sourceSymbol: string;
+    destinationSymbol: string;
+    sourceLogos: {
+        token: string;
+        chain: string;
+    };
+    destinationLogos: {
+        token: string;
+        chain: string;
+    };
+    allCompleted: boolean;
+    hasMultipleSources?: boolean;
+    sources?: TokenSource[];
+}
+export declare const StepFlow: FC<StepFlowProps>;
+export {};
+//# sourceMappingURL=step-flow.d.ts.map

package/dist/swaps/components/step-flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-flow.d.ts","sourceRoot":"","sources":["../../../.build-src/swaps/components/step-flow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAC;AAKhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,UAAU,WAAW;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE;QACZ,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;QACjC,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;KACvC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAqID,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiEtC,CAAC"}

package/dist/swaps/components/step-flow.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, memo } from "react";
+import { TokenIcon } from "./token-icon";
+import { StackedTokenIcons } from "./stacked-token-icons";
+import { cn } from "../../lib/utils";
+import { Atom, CircleCheck, CircleX, SquareArrowOutUpRight } from "lucide-react";
+import {} from "./transaction-progress";
+const StepItem = memo(({ step, isCompleted, isCurrent, isFailed, logos, symbol, totalSteps, index, explorerUrl, allCompleted, hasMultipleSources, sources, }) => {
+    const isSecondLast = index === totalSteps - 2;
+    // Determine opacity based on step state
+    const getOpacity = () => {
+        if (allCompleted)
+            return "opacity-100";
+        if (isCompleted)
+            return "opacity-100";
+        if (isCurrent)
+            return "opacity-100";
+        return "opacity-50";
+    };
+    // Render the appropriate icon based on state
+    const renderIcon = () => {
+        if (isSecondLast) {
+            return _jsx(Atom, { className: "size-4 animate-spin" });
+        }
+        if (hasMultipleSources && sources && sources.length > 0) {
+            return _jsx(StackedTokenIcons, { sources: sources, size: "sm", maxDisplay: 3 });
+        }
+        return (_jsx(TokenIcon, { size: "sm", symbol: symbol, chainLogo: logos.chain, tokenLogo: logos.token, className: "w-full h-full object-cover" }));
+    };
+    return (_jsxs("div", { className: cn("flex gap-x-4 items-center rounded-lg w-full py-1 transition-opacity duration-300", getOpacity()), children: [isFailed ? (_jsx("div", { className: "w-6 h-6 min-w-6 min-h-6 shrink-0 flex items-center justify-center rounded-full bg-red-500/10 text-red-500", children: _jsx("span", { className: "w-2 h-2 min-w-[8px] min-h-[8px] rounded-full bg-red-500" }) })) : isCurrent ? (_jsx("div", { className: "w-6 h-6 min-w-6 min-h-6 shrink-0 flex items-center justify-center rounded-full bg-chart-1/20 animate-pulse", children: _jsx("span", { className: "w-2.5 h-2.5 min-w-[10px] min-h-[10px] rounded-full bg-chart-1" }) })) : isCompleted ? (_jsx("div", { className: "w-6 h-6 min-w-6 min-h-6 shrink-0 flex items-center justify-center rounded-full bg-chart-1/10", children: _jsx("span", { className: "w-2 h-2 min-w-[8px] min-h-[8px] rounded-full bg-chart-1" }) })) : (_jsx("div", { className: "w-6 h-6 min-w-6 min-h-6 shrink-0 flex items-center justify-center rounded-full", children: _jsx("span", { className: "w-2 h-2 min-w-[8px] min-h-[8px] rounded-full bg-muted-foreground/50" }) })), _jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex flex-col items-start gap-y-0.5", children: [_jsx("h3", { className: cn("font-medium text-sm transition-colors duration-300", isFailed ? "text-red-500" : isCompleted || isCurrent
+                                    ? "text-foreground"
+                                    : "text-muted-foreground"), children: step.label }), explorerUrl &&
+                                (isCompleted || isFailed) &&
+                                (isSecondLast || index === totalSteps - 1 || isFailed) && (_jsxs("a", { href: explorerUrl, target: "_blank", rel: "noreferrer", className: "text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-x-1 transition-colors", children: [_jsx(SquareArrowOutUpRight, { className: "size-3" }), " View Transaction"] }))] }), isCurrent && !isCompleted && !isFailed && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Step ", index + 1, " of ", totalSteps] })), isCompleted && !isFailed && _jsx(CircleCheck, { className: "size-5 shrink-0 text-chart-1" }), isFailed && _jsx(CircleX, { className: "size-5 shrink-0 text-red-500" })] })] }));
+});
+StepItem.displayName = "StepItem";
+export const StepFlow = memo(({ steps, currentIndex, totalSteps, sourceSymbol, destinationSymbol, sourceLogos, destinationLogos, explorerUrls, allCompleted, hasMultipleSources, sources, }) => {
+    return (_jsx("div", { className: "flex flex-col gap-y-0 w-full", children: steps.map((step, index) => {
+            const isCompleted = !!step.completed;
+            const isFailed = !!step.failed;
+            const isCurrent = currentIndex === -1 ? false : index === currentIndex;
+            const isLast = index === steps.length - 1;
+            const url = step.explorerUrl ?? (isLast
+                ? explorerUrls.destinationExplorerUrl
+                : index === steps.length - 2
+                    ? explorerUrls.sourceExplorerUrl
+                    : null);
+            // For source steps (not the last step), pass multiple sources info
+            const isSourceStep = !isLast;
+            const showMultipleSources = isSourceStep && hasMultipleSources;
+            return (_jsxs(Fragment, { children: [_jsx(StepItem, { step: step, isCompleted: isCompleted, isCurrent: isCurrent, isFailed: isFailed, index: index, symbol: isLast ? destinationSymbol : sourceSymbol, logos: isLast ? destinationLogos : sourceLogos, totalSteps: totalSteps, explorerUrl: url, allCompleted: allCompleted, hasMultipleSources: showMultipleSources, sources: showMultipleSources ? sources : undefined }), !isLast && (_jsx("div", { className: "flex w-max ml-[11px]", children: _jsx("div", { className: cn("w-0.5 h-5 border border-dashed transition-colors duration-300", isCompleted ? "border-chart-1/50" : "border-border") }) }))] }, step.id));
+        }) }));
+});
+StepFlow.displayName = "StepFlow";

package/dist/swaps/components/token-icon.d.ts

@@ -0,0 +1,11 @@
+type TokenIconSize = "sm" | "md" | "lg";
+interface TokenIconProps {
+    symbol?: string;
+    tokenLogo?: string;
+    chainLogo?: string;
+    size?: TokenIconSize;
+    className?: string;
+}
+export declare const TokenIcon: ({ symbol, tokenLogo, chainLogo, size, className, }: TokenIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=token-icon.d.ts.map

package/dist/swaps/components/token-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-icon.d.ts","sourceRoot":"","sources":["../../../.build-src/swaps/components/token-icon.tsx"],"names":[],"mappings":"AAIA,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAQxC,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oDAMvB,cAAc,4CAgDhB,CAAC"}

package/dist/swaps/components/token-icon.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const SIZE_MAP = {
+    sm: 24,
+    md: 32,
+    lg: 40,
+};
+export const TokenIcon = ({ symbol, tokenLogo, chainLogo, size = "md", className, }) => {
+    const dimension = SIZE_MAP[size];
+    return (_jsxs("span", { className: cn("relative inline-flex", className), children: [tokenLogo ? (_jsx("img", { src: tokenLogo, alt: symbol ?? "token", width: dimension, height: dimension, className: cn("rounded-full object-cover") })) : (_jsx("span", { className: cn("rounded-full bg-ring/80 text-muted-foreground flex items-center justify-center font-semibold uppercase", {
+                    "h-6 w-6 text-xs": size === "sm",
+                    "h-8 w-8 text-sm": size === "md",
+                    "h-10 w-10 text-base": size === "lg",
+                }), children: " " })), chainLogo ? (_jsx("span", { className: "absolute -bottom-0.5 -right-0.5 rounded-full border border-background bg-background", children: _jsx("img", { src: chainLogo, alt: "chain logo", width: Math.max(14, dimension * 0.4), height: Math.max(14, dimension * 0.4), className: "rounded-full object-cover" }) })) : (_jsx("span", { className: cn("absolute -bottom-0.5 -right-0.5 rounded-full bg-ring text-muted-foreground flex items-center justify-center font-semibold uppercase size-6"), children: " " }))] }));
+};

package/dist/swaps/components/transaction-progress.d.ts

@@ -0,0 +1,43 @@
+import { type FC } from "react";
+import { type BridgeStepType, type SwapStepType } from "../../common";
+export type DisplayStep = {
+    id: string;
+    label: string;
+    completed: boolean;
+    failed?: boolean;
+    explorerUrl?: string | null;
+};
+type ProgressStep = BridgeStepType | SwapStepType;
+interface TokenSource {
+    tokenLogo: string;
+    chainLogo: string;
+    symbol: string;
+}
+interface TransactionProgressProps {
+    steps: Array<{
+        id: number;
+        completed: boolean;
+        step: ProgressStep;
+    }>;
+    explorerUrls: {
+        sourceExplorerUrl: string | null;
+        destinationExplorerUrl: string | null;
+    };
+    sourceSymbol: string;
+    destinationSymbol: string;
+    sourceLogos: {
+        token: string;
+        chain: string;
+    };
+    destinationLogos: {
+        token: string;
+        chain: string;
+    };
+    hasMultipleSources?: boolean;
+    sources?: TokenSource[];
+    isTransferMode?: boolean;
+    depositOpportunityName?: string;
+}
+declare const TransactionProgress: FC<TransactionProgressProps>;
+export default TransactionProgress;
+//# sourceMappingURL=transaction-progress.d.ts.map

package/dist/swaps/components/transaction-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transaction-progress.d.ts","sourceRoot":"","sources":["../../../.build-src/swaps/components/transaction-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAC3H,KAAK,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;AAElD,UAAU,WAAW;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,wBAAwB;IAChC,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC,CAAC;IACrE,YAAY,EAAE;QACZ,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;QACjC,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;KACvC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAoBD,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAmHrD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}