@aori/mega-swap-widget 0.1.0

package/dist/WidgetWalletPanel-T7H6FGVN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/flooreyes/mega-swap-widget/dist/WidgetWalletPanel-T7H6FGVN.cjs","../src/components/WidgetWalletPanel.tsx","../src/hooks/useWidgetWalletData.ts","../src/components/wallet/WidgetWalletCard.tsx","../src/components/wallet/WidgetWalletPortfolio.tsx","../src/components/wallet/WidgetWalletAssetItem.tsx","../src/components/wallet/WidgetWalletTradeHistory.tsx","../src/hooks/useWidgetOrderHistory.ts","../src/components/wallet/WidgetWalletTradeItem.tsx"],"names":["jsx"],"mappings":"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","file":"/Users/flooreyes/mega-swap-widget/dist/WidgetWalletPanel-T7H6FGVN.cjs","sourcesContent":[null,"'use client';\n\nimport type { Asset } from '../internal';\nimport React, { useCallback, useState } from 'react';\nimport { useDisconnect } from 'wagmi';\nimport { useSwapFormContext } from '../providers/SwapFormProvider';\nimport { useWidgetSwapUIStore } from '../stores/swapUIStore';\nimport { useWidgetWalletData } from '../hooks/useWidgetWalletData';\nimport { WidgetWalletCard } from './wallet/WidgetWalletCard';\nimport { WidgetWalletPortfolio } from './wallet/WidgetWalletPortfolio';\nimport { WidgetWalletTradeHistory } from './wallet/WidgetWalletTradeHistory';\n\nconst WidgetWalletSkeleton: React.FC = () => (\n  <div className=\"flex flex-col w-full h-full overflow-hidden\">\n    {/* Card placeholder */}\n    <div className=\"p-2 w-full flex justify-center\">\n      <div\n        className=\"relative w-full h-[140px] animate-pulse\"\n        style={{\n          borderRadius: 'var(--widget-radius)',\n          border: '1px var(--widget-border-style) var(--widget-border)',\n          backgroundColor: 'var(--widget-secondary)',\n        }}\n      />\n    </div>\n    {/* Portfolio rows */}\n    <div className=\"px-2 flex flex-col gap-1.5 mt-1\">\n      {[80, 60, 72, 55, 65].map((w, i) => (\n        <div key={i} className=\"flex items-center justify-between py-1.5\">\n          <div className=\"flex items-center gap-2\">\n            <div\n              className=\"h-6 w-6 rounded-full animate-pulse shrink-0\"\n              style={{ backgroundColor: 'var(--widget-secondary)' }}\n            />\n            <div\n              className=\"h-3.5 animate-pulse\"\n              style={{ width: `${w}px`, backgroundColor: 'var(--widget-secondary)', borderRadius: '0.25rem' }}\n            />\n          </div>\n          <div\n            className=\"h-3.5 w-14 animate-pulse\"\n            style={{ backgroundColor: 'var(--widget-secondary)', opacity: 0.5, borderRadius: '0.25rem' }}\n          />\n        </div>\n      ))}\n    </div>\n    {/* Sign out button placeholder */}\n    <div className=\"mt-auto shrink-0 p-2\" style={{ borderTop: '1px var(--widget-border-style) var(--widget-border)' }}>\n      <div\n        className=\"w-full animate-pulse\"\n        style={{\n          height: '34px',\n          backgroundColor: 'var(--widget-secondary)',\n          opacity: 0.35,\n          borderRadius: 'var(--widget-radius)',\n        }}\n      />\n    </div>\n  </div>\n);\n\nexport const WidgetWalletPanel: React.FC = () => {\n  const walletTab = useWidgetSwapUIStore((state) => state.walletTab);\n  const [signOutHovered, setSignOutHovered] = useState(false);\n  const { disconnect } = useDisconnect();\n  const { setQuoteToken } = useSwapFormContext();\n\n  const handleAssetSelect = useCallback(\n    async (asset: Asset) => {\n      await setQuoteToken(asset);\n      useWidgetSwapUIStore.getState().setView('swap');\n    },\n    [setQuoteToken],\n  );\n  const {\n    address,\n    groupedAssets,\n    totalBalance,\n    balancesLoading,\n    chains,\n    getToken,\n    useTokenWithLazyLoad,\n    tokenRegistry,\n  } = useWidgetWalletData(true);\n\n  if (!address) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full p-4\">\n        <p className=\"text-sm\" style={{ color: 'var(--widget-muted-foreground)' }}>\n          Connect your wallet to view your portfolio\n        </p>\n      </div>\n    );\n  }\n\n  if (balancesLoading && walletTab === 'wallet') {\n    return <WidgetWalletSkeleton />;\n  }\n\n  return (\n    <div className=\"flex flex-col w-full h-full overflow-hidden\">\n      <div className=\"flex-1 overflow-y-auto\" style={{ minHeight: 0 }}>\n        {walletTab === 'wallet' && (\n          <>\n            <WidgetWalletCard\n              address={address}\n              totalBalance={totalBalance}\n              isLoading={balancesLoading}\n            />\n            <WidgetWalletPortfolio\n              groupedAssets={groupedAssets}\n              chains={chains}\n              tokenRegistry={tokenRegistry}\n              getToken={getToken}\n              useTokenWithLazyLoad={useTokenWithLazyLoad}\n              onAssetSelect={handleAssetSelect}\n            />\n          </>\n        )}\n\n        {walletTab === 'activity' && (\n          <WidgetWalletTradeHistory isActive={walletTab === 'activity'} />\n        )}\n      </div>\n\n      {/* Footer — sign out */}\n      <div\n        className=\"shrink-0 p-2\"\n        style={{ borderTop: '1px var(--widget-border-style) var(--widget-border)' }}\n      >\n        <button\n          type=\"button\"\n          onClick={() => {\n            disconnect();\n            useWidgetSwapUIStore.getState().setView('swap');\n          }}\n          onMouseEnter={() => setSignOutHovered(true)}\n          onMouseLeave={() => setSignOutHovered(false)}\n          className=\"w-full py-2 text-xs mono uppercase cursor-pointer transition-colors\"\n          style={{\n            backgroundColor: signOutHovered ? 'var(--widget-destructive)' : 'transparent',\n            color: signOutHovered ? 'var(--widget-destructive-foreground)' : 'var(--widget-destructive)',\n            border: '1px var(--widget-border-style) var(--widget-destructive)',\n            borderRadius: 'var(--widget-radius)',\n          }}\n        >\n          Sign Out\n        </button>\n      </div>\n    </div>\n  );\n};\n","'use client';\n\nimport {\n  getChainConfig,\n  isGasToken,\n  useChainData,\n  useBulkBalances,\n  useTokenData,\n  useTokenWithLazyLoad,\n  type Asset,\n  type SupportedChainId,\n} from '../internal';\nimport { useWalletState } from '../wallet/useWalletState';\nimport { useWidgetConfig } from '../context/WidgetConfigContext';\nimport { useEnabledChainIds } from './useEnabledChainIds';\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\n/**\n * Self-contained data hook for WidgetWalletPanel.\n * Only fetches balances when the wallet view is active (isActive === true).\n */\nexport function useWidgetWalletData(isActive: boolean) {\n  const { address, isConnected } = useWalletState();\n  const { chainDataMap } = useChainData();\n  const availableChainIds = useEnabledChainIds();\n  const { getToken, tokenRegistry } = useTokenData();\n  const { supportedInputTokens, supportedOutputTokens } = useWidgetConfig();\n\n  const allSupportedTokens = useMemo(() => {\n    if (!supportedInputTokens.length && !supportedOutputTokens.length) return [];\n    const seen = new Set<string>();\n    const result: Array<{ chainId: number; address: string }> = [];\n    for (const t of [...supportedInputTokens, ...supportedOutputTokens]) {\n      const key = `${t.chainId}-${t.address.toLowerCase()}`;\n      if (!seen.has(key)) {\n        seen.add(key);\n        result.push(t);\n      }\n    }\n    return result;\n  }, [supportedInputTokens, supportedOutputTokens]);\n\n  const { balances, isLoading: balancesLoading, isError: balancesError, refetch } = useBulkBalances(\n    address,\n    availableChainIds as SupportedChainId[],\n    {\n      enabled: isConnected && isActive && !!address,\n      refetchOnWindowFocus: false,\n    },\n    allSupportedTokens.length > 0 ? allSupportedTokens : undefined,\n  );\n\n  const supportedSet = useMemo(() => {\n    if (!allSupportedTokens.length) return null;\n    return new Set(allSupportedTokens.map((t) => `${t.chainId}-${t.address.toLowerCase()}`));\n  }, [allSupportedTokens]);\n\n  const groupedAssets = useMemo(() => {\n    if (!balances || balances.length === 0) return {};\n\n    const filtered = balances.filter((b) => {\n      if (!b.assetInfo) return false;\n      if (!b.balance || b.balance === '0') return false;\n      if (supportedSet) {\n        return supportedSet.has(`${b.chainId}-${b.address.toLowerCase()}`);\n      }\n      if (isGasToken(b.assetInfo as Asset)) return true;\n      if (tokenRegistry.length === 0) return true;\n      return tokenRegistry.some(\n        (t) => t.address.toLowerCase() === b.address.toLowerCase() && t.chainId === b.chainId,\n      );\n    });\n\n    return filtered.reduce((acc, b) => {\n      const key = String(b.chainId);\n      if (!acc[key]) acc[key] = [];\n      acc[key].push({\n        token: b.address,\n        amount: b.balance,\n        decimals: b.decimals,\n        assetInfo: b.assetInfo,\n      });\n      return acc;\n    }, {} as Record<string, any[]>);\n  }, [balances, tokenRegistry, supportedSet]);\n\n  const totalBalance = useMemo(() => {\n    if (!balances || balances.length === 0) return 0;\n    return balances.reduce((total, b) => {\n      if (!b.assetInfo || b.decimals === undefined) return total;\n      return total + (parseFloat(b.balance) / 10 ** b.decimals) * (b.assetInfo.price || 0);\n    }, 0);\n  }, [balances]);\n\n  const chains = useMemo(() => {\n    if (availableChainIds.length === 0) return {};\n    return availableChainIds.reduce(\n      (acc, chainId) => {\n        const apiData = chainDataMap[chainId as number];\n        const staticConfig = getChainConfig(chainId as number);\n        acc[chainId.toString()] = {\n          chainId: chainId as number,\n          name: staticConfig?.displayName || apiData?.chainKey || `Chain ${chainId}`,\n        };\n        return acc;\n      },\n      {} as Record<string, { chainId: number; name: string }>,\n    );\n  }, [availableChainIds, chainDataMap]);\n\n  const tokenRegistryForPanel = useMemo(\n    () => tokenRegistry.map((t) => ({ address: t.address, chainId: t.chainId })),\n    [tokenRegistry],\n  );\n\n  const refetchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (refetchTimerRef.current) clearTimeout(refetchTimerRef.current);\n    };\n  }, []);\n\n  const refetchBalances = useCallback(() => {\n    if (refetchTimerRef.current) clearTimeout(refetchTimerRef.current);\n    refetchTimerRef.current = setTimeout(() => refetch(), 2000);\n  }, [refetch]);\n\n  return {\n    address,\n    isConnected,\n    groupedAssets,\n    totalBalance,\n    balancesLoading,\n    balancesError,\n    chains,\n    getToken,\n    useTokenWithLazyLoad,\n    tokenRegistry: tokenRegistryForPanel,\n    refetchBalances,\n  };\n}\n","'use client';\n\nimport { CopyText, Skeleton } from '../../internal';\nimport { makeGradient } from 'ethereum-gradient-base64';\nimport React from 'react';\n\ninterface WidgetWalletCardProps {\n  address: string;\n  totalBalance: number;\n  isLoading?: boolean;\n}\n\nexport const WidgetWalletCard: React.FC<WidgetWalletCardProps> = ({\n  address,\n  totalBalance,\n  isLoading = false,\n}) => {\n  const formatBalance = (balance: number) =>\n    new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD',\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(balance);\n\n  return (\n    <div className=\"p-2 w-full flex justify-center\">\n      <div\n        className=\"relative w-full h-[140px] overflow-hidden\"\n        style={{\n          borderRadius: 'var(--widget-radius)',\n          border: '1px var(--widget-border-style) var(--widget-border)',\n        }}\n      >\n        {/* Gradient background */}\n        <div className=\"absolute inset-0 z-0\">\n          <img\n            className=\"w-full h-full object-cover opacity-60\"\n            src={makeGradient(address)}\n            alt=\"address gradient\"\n          />\n          <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n        </div>\n\n        {/* Content */}\n        <div className=\"relative z-10 flex h-full flex-col justify-between p-3\">\n          <div>\n            <p className=\"text-2xs uppercase mono\" style={{ color: 'var(--widget-muted-foreground)', opacity: 0.7 }}>\n              Token Balance:\n            </p>\n            {isLoading ? (\n              <Skeleton className=\"h-8 w-28 bg-white/10 rounded mt-1\" />\n            ) : (\n              <p className=\"text-2xl font-bold mt-0.5\" style={{ color: 'var(--widget-foreground)' }}>\n                {formatBalance(totalBalance)}\n              </p>\n            )}\n          </div>\n          <div className=\"flex items-center\">\n            <CopyText text={address} type=\"address\">\n              <p className=\"mono text-2xs\" style={{ color: 'var(--widget-foreground)', opacity: 0.7 }}>\n                {address}\n              </p>\n            </CopyText>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n","'use client';\n\nimport type { Asset } from '../../internal/types';\nimport { getChainNames, isGasToken } from '../../internal/chainsConfig';\nimport ChainIcon from '../../internal/components/ChainIcon';\n\nconst usdFormat = new Intl.NumberFormat('en-US', {\n  style: 'currency',\n  currency: 'USD',\n  minimumFractionDigits: 2,\n});\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { WidgetWalletAssetItem } from './WidgetWalletAssetItem';\n\nconst CHAIN_NAMES = getChainNames();\n\ninterface WidgetWalletPortfolioProps {\n  groupedAssets: Record<string, any[]>;\n  chains?: Record<string, { chainId: number; name: string }>;\n  tokenRegistry?: Array<{ address: string; chainId: number }>;\n  getToken?: (chainId: number, address: string) => Asset | undefined;\n  useTokenWithLazyLoad?: any;\n  onAssetSelect?: (asset: Asset) => void;\n}\n\nexport const WidgetWalletPortfolio: React.FC<WidgetWalletPortfolioProps> = ({\n  groupedAssets,\n  chains,\n  tokenRegistry = [],\n  getToken,\n  useTokenWithLazyLoad,\n  onAssetSelect,\n}) => {\n  const [expandedChains, setExpandedChains] = useState<Set<string>>(new Set());\n\n  const getChainName = useCallback(\n    (chainId: number): string => chains?.[chainId]?.name || CHAIN_NAMES[chainId] || `Chain ${chainId}`,\n    [chains],\n  );\n\n  const registrySet = useMemo(() => {\n    const s = new Set<string>();\n    for (const t of tokenRegistry) {\n      s.add(`${t.chainId}-${t.address.toLowerCase()}`);\n    }\n    return s;\n  }, [tokenRegistry]);\n\n  const calculateDollarizedBalance = useCallback((asset: any): number => {\n    if (asset.decimals === undefined || !asset.assetInfo?.price) return 0;\n    return (parseFloat(asset.amount) / 10 ** asset.decimals) * asset.assetInfo.price;\n  }, []);\n\n  const { filteredGroupedAssets, chainTotals } = useMemo(() => {\n    const entries = Object.entries(groupedAssets)\n      .map(([chainId, assets]) => {\n        const filtered = assets.filter((asset) => {\n          if (!asset.assetInfo) return false;\n          if (isGasToken(asset.assetInfo)) return true;\n          if (registrySet.size > 0) {\n            return registrySet.has(\n              `${asset.assetInfo.chainId}-${asset.assetInfo.address?.toLowerCase() ?? ''}`,\n            );\n          }\n          return true;\n        });\n        return [chainId, filtered] as [string, any[]];\n      })\n      .filter(([, assets]) => assets.length > 0);\n\n    const totals: Record<string, number> = {};\n    for (const [chainId, assets] of entries) {\n      totals[chainId] = assets.reduce((sum, asset) => sum + calculateDollarizedBalance(asset), 0);\n    }\n\n    const sorted = [...entries].sort((a, b) => (totals[b[0]] ?? 0) - (totals[a[0]] ?? 0));\n    return { filteredGroupedAssets: sorted, chainTotals: totals };\n  }, [groupedAssets, registrySet, calculateDollarizedBalance]);\n\n  const toggleChain = useCallback((chainId: string) => {\n    setExpandedChains((prev) => {\n      const next = new Set(prev);\n      if (next.has(chainId)) next.delete(chainId);\n      else next.add(chainId);\n      return next;\n    });\n  }, []);\n\n  const formatUSD = (v: number) => usdFormat.format(v);\n\n  if (filteredGroupedAssets.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center p-6\">\n        <p className=\"text-sm\" style={{ color: 'var(--widget-muted-foreground)' }}>\n          No token balances found\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"pb-2 pt-1\">\n      {filteredGroupedAssets.map(([chainId, assets]) => {\n        const chainIdNum = parseInt(chainId);\n        const chainName = getChainName(chainIdNum);\n        const totalChainValue = chainTotals[chainId] || 0;\n        const isExpanded = expandedChains.has(chainId);\n\n        return (\n          <div\n            key={chainId}\n            className=\"mx-2 mb-2\"\n            style={{\n              border: '1px var(--widget-border-style) var(--widget-border)',\n              borderRadius: 'var(--widget-radius)',\n              overflow: 'hidden',\n            }}\n          >\n            <button\n              type=\"button\"\n              onClick={() => toggleChain(chainId)}\n              className=\"flex w-full flex-row items-center justify-between p-2 cursor-pointer transition-colors hover:bg-(--widget-secondary)\"\n              style={{ backgroundColor: 'transparent' }}\n            >\n              <div className=\"inline-flex flex-row items-center gap-2\">\n                <ChainIcon chain={chainIdNum} size=\"sm\" />\n                <p className=\"text-sm font-medium capitalize\" style={{ color: 'var(--widget-foreground)' }}>\n                  {chainName}\n                </p>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <p className=\"text-sm font-semibold\" style={{ color: 'var(--widget-foreground)' }}>\n                  {formatUSD(totalChainValue)}\n                </p>\n                <span\n                  className={`transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}\n                  style={{ color: 'var(--widget-muted-foreground)' }}\n                >\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                    <path\n                      d=\"M2.5 4.5L6 8L9.5 4.5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                </span>\n              </div>\n            </button>\n\n            <div\n              className={`overflow-hidden transition-all duration-200 ease-out ${\n                isExpanded ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'\n              }`}\n            >\n              <div style={{ borderTop: '1px var(--widget-border-style) var(--widget-border)' }}>\n                {assets.map((asset) => {\n                  if (!asset.assetInfo) return null;\n                  return (\n                    <WidgetWalletAssetItem\n                      key={`${asset.assetInfo.chainId}-${asset.token}`}\n                      asset={asset.assetInfo}\n                      balanceAmount={asset.amount}\n                      balanceDecimals={asset.decimals}\n                      price={asset.assetInfo?.price ?? null}\n                      onSelect={onAssetSelect}\n                      getToken={getToken}\n                      useTokenWithLazyLoad={useTokenWithLazyLoad}\n                    />\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n","'use client';\n\nimport { TokenImage, isGasToken, type Asset } from '../../internal';\nimport React, { useState } from 'react';\n\ninterface WidgetWalletAssetItemProps {\n  asset: Asset;\n  balanceAmount: string;\n  balanceDecimals: number;\n  price: number | null | undefined;\n  onSelect?: (asset: Asset) => void;\n  getToken?: (chainId: number, address: string) => Asset | undefined;\n  useTokenWithLazyLoad?: (\n    chainId: number | undefined,\n    address: string | undefined,\n  ) => { token: Asset | undefined; isLoading: boolean; isError: boolean };\n}\n\nexport const WidgetWalletAssetItem: React.FC<WidgetWalletAssetItemProps> = ({\n  asset,\n  balanceAmount,\n  balanceDecimals,\n  price,\n  onSelect,\n  getToken,\n  useTokenWithLazyLoad,\n}) => {\n  const [hovered, setHovered] = useState(false);\n\n  const balance =\n    balanceDecimals !== undefined ? parseFloat(balanceAmount) / 10 ** balanceDecimals : 0;\n\n  const lazyLoadResult = useTokenWithLazyLoad?.(asset.chainId, asset.address);\n  const lazyToken = lazyLoadResult?.token;\n\n  let finalPrice: number | null = price ?? null;\n  if (isGasToken(asset) && finalPrice == null) {\n    if (lazyToken?.price != null) {\n      finalPrice = lazyToken.price;\n    } else if (getToken) {\n      finalPrice = getToken(asset.chainId, asset.address)?.price ?? null;\n    }\n  }\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      className=\"flex h-[52px] w-full flex-row items-center p-3 cursor-pointer transition-colors\"\n      style={{\n        borderBottom: '1px var(--widget-border-style) var(--widget-border)',\n        backgroundColor: hovered ? 'var(--widget-secondary)' : 'transparent',\n      }}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onClick={() => onSelect?.(asset)}\n      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect?.(asset); } }}\n    >\n      <div className=\"flex h-full w-full flex-row items-center justify-between\">\n        <div className=\"flex h-full flex-row items-center gap-2\">\n          <TokenImage asset={asset} size=\"sm\" />\n          <div className=\"flex flex-col items-start\">\n            <p className=\"text-sm font-medium uppercase\" style={{ color: 'var(--widget-foreground)' }}>\n              {asset.symbol}\n            </p>\n            {balance > 0 && (\n              <p className=\"mono text-xs\" style={{ color: 'var(--widget-muted-foreground)' }}>\n                {balance.toFixed(4)}\n              </p>\n            )}\n          </div>\n        </div>\n        <p className=\"text-sm font-medium\" style={{ color: 'var(--widget-foreground)' }}>\n          {finalPrice != null ? `$${(finalPrice * balance).toFixed(2)}` : '—'}\n        </p>\n      </div>\n    </div>\n  );\n};\n","'use client';\n\nimport React, { useCallback, useRef, useState } from 'react';\nimport { useWalletState } from '../../wallet/useWalletState';\nimport { useWidgetOrderHistory } from '../../hooks/useWidgetOrderHistory';\nimport { WidgetWalletTradeItem } from './WidgetWalletTradeItem';\n\nconst TradeSkeleton: React.FC = () => (\n  <div\n    className=\"mt-2 flex flex-col\"\n    style={{\n      height: '4rem',\n      border: '1px var(--widget-border-style) var(--widget-border)',\n      backgroundColor: 'var(--widget-secondary)',\n    }}\n  >\n    <div className=\"flex items-center space-x-2 p-2\">\n      <div className=\"h-4 w-4 rounded\" style={{ backgroundColor: 'var(--widget-muted)' }} />\n      <div className=\"h-3 w-24 rounded\" style={{ backgroundColor: 'var(--widget-muted)' }} />\n    </div>\n    <div className=\"flex h-8 w-full items-center justify-between px-4\">\n      <div className=\"flex items-center space-x-1\">\n        {[4, 16, 10, 4, 16, 10].map((w, i) => (\n          <div key={i} className=\"h-3 rounded\" style={{ width: `${w * 4}px`, backgroundColor: 'var(--widget-muted)' }} />\n        ))}\n      </div>\n      <div className=\"h-3 w-10 rounded\" style={{ backgroundColor: 'var(--widget-muted)' }} />\n    </div>\n  </div>\n);\n\ninterface WidgetWalletTradeHistoryProps {\n  isActive: boolean;\n}\n\nexport const WidgetWalletTradeHistory: React.FC<WidgetWalletTradeHistoryProps> = ({ isActive }) => {\n  const { address: userAddress } = useWalletState();\n  const { orders, isLoading, error, hasMore, loadMore } = useWidgetOrderHistory(userAddress, isActive);\n\n  const [isFetching, setIsFetching] = useState(false);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const handleScroll = useCallback(\n    async (e: React.UIEvent<HTMLDivElement>) => {\n      const target = e.currentTarget;\n      const isNearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 100;\n      if (isNearBottom && !isLoading && !isFetching && hasMore) {\n        setIsFetching(true);\n        try {\n          await loadMore();\n        } finally {\n          setIsFetching(false);\n        }\n      }\n    },\n    [isLoading, isFetching, hasMore, loadMore],\n  );\n\n  if (!userAddress) {\n    return (\n      <div className=\"flex items-center justify-center p-4\">\n        <p className=\"text-sm\" style={{ color: 'var(--widget-muted-foreground)' }}>\n          Connect your wallet to view activity\n        </p>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center p-4\">\n        <p className=\"text-sm\" style={{ color: 'var(--widget-destructive)' }}>\n          Error loading activity\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={scrollRef}\n      className=\"flex flex-col flex-1 min-h-0 overflow-y-auto p-2\"\n      onScroll={handleScroll}\n      style={{ backgroundColor: 'transparent' }}\n    >\n      {isLoading ? (\n        Array.from({ length: 5 }).map((_, i) => <TradeSkeleton key={i} />)\n      ) : orders.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center h-full p-6\">\n          <p className=\"text-sm\" style={{ color: 'var(--widget-muted-foreground)' }}>\n            No Activity\n          </p>\n        </div>\n      ) : (\n        <>\n          {orders.map((order) => (\n            <WidgetWalletTradeItem\n              key={order.orderHash}\n              order={order}\n              baseToken={order.enrichedTokens?.base ?? null}\n              quoteToken={order.enrichedTokens?.quote ?? null}\n            />\n          ))}\n          {isFetching && <TradeSkeleton />}\n        </>\n      )}\n    </div>\n  );\n};\n","'use client';\n\nimport type { Asset } from '../internal';\n\nexport interface EnrichedOrderResult {\n  orderHash?: string;\n  quoteId?: string;\n  enrichedTokens?: {\n    base: Asset | null;\n    quote: Asset | null;\n  };\n  [key: string]: unknown;\n}\n\ninterface UseWidgetOrderHistoryReturn {\n  orders: EnrichedOrderResult[];\n  isLoading: boolean;\n  error: string | null;\n  hasMore: boolean;\n  loadMore: () => Promise<void>;\n  totalOrders: number;\n}\n\nexport function useWidgetOrderHistory(\n  _userAddress: string | null | undefined,\n  _enabled: boolean,\n): UseWidgetOrderHistoryReturn {\n  return {\n    orders: [],\n    isLoading: false,\n    error: null,\n    hasMore: false,\n    loadMore: async () => {},\n    totalOrders: 0,\n  };\n}\n","'use client';\n\nimport { TokenImage, TruncateString, formatNumber, type Asset } from '../../internal';\nimport React, { useState } from 'react';\n\ninterface WidgetWalletTradeItemProps {\n  order: any;\n  baseToken?: Asset | null;\n  quoteToken?: Asset | null;\n}\n\n// Simple static inline SVGs — all use currentColor so they respond to the host app's theme vars\nconst IconCheck = () => (\n  <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n    <circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"currentColor\" strokeWidth=\"1.2\" />\n    <path d=\"M3 5.2L4.3 6.5L7 3.5\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst IconX = () => (\n  <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n    <circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"currentColor\" strokeWidth=\"1.2\" />\n    <path d=\"M3.5 3.5L6.5 6.5M6.5 3.5L3.5 6.5\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" />\n  </svg>\n);\n\nconst IconClock = () => (\n  <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n    <circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"currentColor\" strokeWidth=\"1.2\" />\n    <path d=\"M5 3V5.5L6.5 6.5\" stroke=\"currentColor\" strokeWidth=\"1\" strokeLinecap=\"round\" />\n  </svg>\n);\n\nconst IconDot = () => (\n  <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n    <circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"currentColor\" strokeWidth=\"1.2\" />\n    <circle cx=\"5\" cy=\"5\" r=\"1.5\" fill=\"currentColor\" />\n  </svg>\n);\n\nconst getEventTypeIcon = (eventType: string) => {\n  switch ((eventType || '').toLowerCase()) {\n    case 'completed':\n    case 'settled':\n    case 'success':\n    case 'swapped':\n    case 'swap':\n      return { icon: <IconCheck />, color: 'var(--widget-primary)' };\n    case 'received':\n      return { icon: <IconDot />, color: 'var(--widget-accent)' };\n    case 'failed':\n    case 'error':\n    case 'expired':\n      return { icon: <IconX />, color: 'var(--widget-destructive)' };\n    case 'pending':\n    case 'created':\n    case 'placed':\n      return { icon: <IconClock />, color: 'var(--widget-muted-foreground)' };\n    default:\n      return { icon: <IconDot />, color: 'var(--widget-muted-foreground)' };\n  }\n};\n\nconst getEventTypeHoverBg = (eventType: string): string => {\n  switch ((eventType || '').toLowerCase()) {\n    case 'completed':\n    case 'settled':\n    case 'success':\n    case 'swapped':\n    case 'swap':\n      return 'color-mix(in srgb, var(--widget-primary) 5%, transparent)';\n    case 'failed':\n    case 'error':\n    case 'expired':\n      return 'color-mix(in srgb, var(--widget-destructive) 5%, transparent)';\n    case 'pending':\n    case 'created':\n    case 'placed':\n      return 'color-mix(in srgb, var(--widget-accent) 5%, transparent)';\n    default:\n      return 'var(--widget-secondary)';\n  }\n};\n\nconst formatAmountSafe = (rawAmount: string, tokenData: Asset | null): string => {\n  try {\n    const numAmount = parseFloat(rawAmount || '0');\n    if (isNaN(numAmount) || numAmount === 0) return '0';\n    const decimals = tokenData?.decimals ?? 18;\n    return formatNumber(numAmount / 10 ** decimals);\n  } catch {\n    return '0';\n  }\n};\n\nexport const WidgetWalletTradeItem: React.FC<WidgetWalletTradeItemProps> = ({\n  order,\n  baseToken,\n  quoteToken,\n}) => {\n  const [hovered, setHovered] = useState(false);\n\n  const eventType = order?.status || order?.eventType || 'unknown';\n  const { icon: eventIcon, color: eventColor } = getEventTypeIcon(eventType);\n\n  const formatDateTime = (timestamp: string) => {\n    if (!timestamp) return { date: '', time: '' };\n    const d = new Date(typeof timestamp === 'number' ? timestamp : Number(timestamp) || timestamp);\n    return {\n      date: d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),\n      time: d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC', hour12: false }) + ' UTC',\n    };\n  };\n\n  const dateTime = formatDateTime(order?.timestamp || order?.createdAt || '');\n\n  const inputDisplay = baseToken\n    ? { asset: baseToken, symbol: baseToken.symbol, amount: formatAmountSafe(order?.inputAmount, baseToken) }\n    : { asset: null, symbol: (order?.inputToken || '').slice(0, 6) + '...', amount: formatAmountSafe(order?.inputAmount, null) };\n\n  const outputDisplay = quoteToken\n    ? { asset: quoteToken, symbol: quoteToken.symbol, amount: formatAmountSafe(order?.outputAmount, quoteToken) }\n    : { asset: null, symbol: (order?.outputToken || '').slice(0, 6) + '...', amount: formatAmountSafe(order?.outputAmount, null) };\n\n  return (\n    <a\n      href={order?.explorerUrl || '#'}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"group flex flex-col cursor-pointer transition-all duration-200 ease-in-out no-underline\"\n      style={{\n        border: '1px var(--widget-border-style) var(--widget-border)',\n        backgroundColor: hovered ? getEventTypeHoverBg(eventType) : 'transparent',\n        marginBottom: '0.5rem',\n        padding: '0.25rem',\n      }}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n    >\n      {/* Top row: status + hash */}\n      <div className=\"flex flex-row items-center justify-between space-x-1\">\n        <div className=\"flex flex-row items-center space-x-1\">\n          <div className=\"-translate-y-px\" style={{ color: eventColor }}>{eventIcon}</div>\n          <p className=\"text-2xs mono uppercase\" style={{ color: eventColor }}>\n            {eventType}\n          </p>\n        </div>\n        <div className=\"flex flex-row items-center space-x-2\">\n          <span className=\"text-2xs mono\" style={{ color: hovered ? 'var(--widget-foreground)' : 'var(--widget-muted-foreground)' }}>\n            {'¬ '}{TruncateString(order?.quoteId || order?.orderHash || '')}\n          </span>\n          <svg\n            className=\"w-2.5 -translate-y-px opacity-70 group-hover:rotate-[-45deg] group-hover:opacity-100 duration-200\"\n            style={{ color: 'var(--widget-foreground)' }}\n            viewBox=\"0 0 684 684\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M0.666687 384.667L519.92 384.667L281.627 622.96L342 683.333L683.333 342L342 0.666687L281.627 61.04L519.92 299.333L0.666687 299.333V384.667Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </div>\n      </div>\n\n      {/* Bottom row: token swap details */}\n      <div\n        className=\"flex flex-row items-center justify-between pr-2\"\n        style={{ backgroundColor: hovered ? 'transparent' : 'var(--widget-secondary)' }}\n      >\n        <div className=\"flex flex-col w-full h-full p-2\">\n          <div className=\"flex h-8 w-full items-center justify-between px-2\">\n            <div className=\"flex items-center space-x-1\">\n              <TokenImage asset={inputDisplay.asset} size=\"xs\" className=\"h-3 w-3\" />\n              <div className=\"flex flex-col\">\n                <span className=\"text-sm h-4\" style={{ color: 'var(--widget-muted-foreground)' }}>\n                  {inputDisplay.amount}\n                </span>\n                <span className=\"text-xs\" style={{ color: 'var(--widget-foreground)' }}>\n                  {inputDisplay.symbol}\n                </span>\n              </div>\n              <span className=\"px-1\" style={{ color: 'var(--widget-muted-foreground)' }}>→</span>\n              <TokenImage asset={outputDisplay.asset} size=\"xs\" className=\"h-3 w-3\" />\n              <div className=\"flex flex-col\">\n                <span className=\"text-sm h-4\" style={{ color: 'var(--widget-muted-foreground)' }}>\n                  {outputDisplay.amount}\n                </span>\n                <span className=\"text-xs\" style={{ color: 'var(--widget-foreground)' }}>\n                  {outputDisplay.symbol}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className=\"flex flex-col items-end text-right shrink-0\">\n          <span className=\"text-2xs mono whitespace-nowrap\" style={{ color: 'var(--widget-muted-foreground)' }}>\n            {dateTime.date}\n          </span>\n          {dateTime.time && (\n            <span className=\"text-2xs mono whitespace-nowrap\" style={{ color: 'var(--widget-muted-foreground)', opacity: 0.6 }}>\n              {dateTime.time}\n            </span>\n          )}\n        </div>\n      </div>\n    </a>\n  );\n};\n"]}

package/dist/chunk-3E6RNP2D.cjs

@@ -0,0 +1,389 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+
+var _chunk6XB5R4GFcjs = require('./chunk-6XB5R4GF.cjs');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _chunkGZUTUD5Ocjs = require('./chunk-GZUTUD5O.cjs');
+
+
+var _chunkPGYOJ5RBcjs = require('./chunk-PGYOJ5RB.cjs');
+
+// src/components/AssetSelectionMenu.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _shallow = require('zustand/react/shallow');
+
+// src/components/AssetSelectionBalanceItem.tsx
+
+var _jsxruntime = require('react/jsx-runtime');
+var AssetSelectionBalanceItem = _react2.default.memo(
+  ({ asset, otherAsset, handleFormSelection, getToken }) => {
+    const { token: lazyToken } = _chunkGZUTUD5Ocjs.useTokenWithLazyLoad.call(void 0, asset.chainId, asset.address);
+    const cachedToken = getToken(asset.chainId, asset.address);
+    const token = lazyToken || cachedToken || asset.assetInfo;
+    if (!token) return null;
+    const hasPrice = token.price != null;
+    const dollarValue = hasPrice && asset.decimals !== void 0 ? _chunkGZUTUD5Ocjs.calculateDollarizedBalance.call(void 0, token, asset.balance, asset.decimals) : null;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: "w-full flex items-center justify-between p-3 cursor-pointer",
+        style: { borderBottom: "1px solid var(--widget-border)" },
+        onClick: () => handleFormSelection(token, otherAsset),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center space-x-3 min-w-0 flex-1", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZUTUD5Ocjs.TokenImage_default, { asset: token, size: "md", className: "flex-shrink-0" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-base font-medium", style: { color: "var(--widget-foreground)" }, children: token.symbol.length > 20 ? `${token.symbol.substring(0, 20)}...` : token.symbol }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm", style: { color: "var(--widget-foreground)", opacity: 0.6 }, children: token.name.length > 20 ? `${token.name.substring(0, 20)}...` : token.name })
+            ] })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-end text-right flex-shrink-0", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-mono", style: { color: "var(--widget-foreground)", opacity: 0.5 }, children: "Balance:" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-mono", style: { color: "var(--widget-foreground)" }, children: dollarValue != null ? `$${dollarValue.toFixed(2)}` : "\u2014" })
+          ] })
+        ]
+      },
+      `${token.chainId}-${token.address}`
+    );
+  },
+  (prevProps, nextProps) => prevProps.asset.address === nextProps.asset.address && prevProps.asset.chainId === nextProps.asset.chainId && prevProps.asset.balance === nextProps.asset.balance && _optionalChain([prevProps, 'access', _ => _.asset, 'access', _2 => _2.assetInfo, 'optionalAccess', _3 => _3.price]) === _optionalChain([nextProps, 'access', _4 => _4.asset, 'access', _5 => _5.assetInfo, 'optionalAccess', _6 => _6.price]) && prevProps.otherAsset.address === nextProps.otherAsset.address
+);
+AssetSelectionBalanceItem.displayName = "AssetSelectionBalanceItem";
+
+// src/components/AssetSelectionMenu.tsx
+
+var AssetSelectionMenu = ({
+  toggle,
+  side,
+  otherAsset,
+  containerHeight,
+  onChainHover,
+  onMoreChainsClick,
+  selectedChainFilter
+}) => {
+  const { address: userAddress } = _chunkPGYOJ5RBcjs.useWalletState.call(void 0, );
+  const {
+    assetSelectionSearch: searchQuery,
+    assetSelectionChain: selectedChain,
+    assetSelectionCategory: categoryState,
+    recentChainIds
+  } = _chunk6XB5R4GFcjs.useWidgetSwapUIStore.call(void 0, 
+    _shallow.useShallow.call(void 0, (state) => ({
+      assetSelectionSearch: state.assetSelectionSearch,
+      assetSelectionChain: state.assetSelectionChain,
+      assetSelectionCategory: state.assetSelectionCategory,
+      recentChainIds: state.recentChainIds
+    }))
+  );
+  const debouncedSearchQuery = _chunkGZUTUD5Ocjs.useDebounce.call(void 0, searchQuery, 300);
+  const availableChainIds = _chunkGZUTUD5Ocjs.useEnabledChainIds.call(void 0, );
+  const { supportedInputTokens, supportedOutputTokens, supportedInputChains, supportedOutputChains, inputSelectionSearch, outputSelectionSearch, showInputSelectionTokenBalances, showOutputSelectionTokenBalances } = _chunkGZUTUD5Ocjs.useWidgetConfig.call(void 0, );
+  const showSearch = side === "base" ? inputSelectionSearch : outputSelectionSearch;
+  const showBalances = side === "base" ? showInputSelectionTokenBalances : showOutputSelectionTokenBalances;
+  const { setBaseToken, setQuoteToken } = _chunk6XB5R4GFcjs.useSwapFormContext.call(void 0, );
+  const sideTokens = side === "base" ? supportedInputTokens : supportedOutputTokens;
+  const sideChains = side === "base" ? supportedInputChains : supportedOutputChains;
+  const hideChainsBar = sideChains.length === 1;
+  const supportedTokensSet = _react.useMemo.call(void 0, () => {
+    if (sideTokens.length === 0) return null;
+    const s = /* @__PURE__ */ new Set();
+    for (const t of sideTokens) {
+      s.add(`${t.chainId}-${t.address.toLowerCase()}`);
+    }
+    return s;
+  }, [sideTokens]);
+  _react.useEffect.call(void 0, () => {
+    if (hideChainsBar) {
+      _chunk6XB5R4GFcjs.useWidgetSwapUIStore.getState().setAssetSelectionChain(sideChains[0]);
+    } else if (selectedChainFilter) {
+      _chunk6XB5R4GFcjs.useWidgetSwapUIStore.getState().setAssetSelectionChain(selectedChainFilter);
+    }
+  }, [selectedChainFilter, hideChainsBar, sideChains]);
+  const DISPLAY_CHAINS = _react2.default.useMemo(() => {
+    const MEGAETH_CHAIN_ID = 4326;
+    const maxDisplayChains = 5;
+    const sideChainSet = sideChains.length > 0 ? new Set(sideChains) : null;
+    const availableChains = _chunkGZUTUD5Ocjs.getAvailableChainConfigs.call(void 0, availableChainIds).filter((c) => !sideChainSet || sideChainSet.has(c.id)).map((c) => ({ chainId: c.id, name: c.displayName }));
+    const chainMap = new Map(availableChains.map((c) => [c.chainId, c]));
+    const result = [];
+    const used = /* @__PURE__ */ new Set();
+    const megaEth = chainMap.get(MEGAETH_CHAIN_ID);
+    if (megaEth) {
+      result.push(megaEth);
+      used.add(MEGAETH_CHAIN_ID);
+    }
+    for (const recentId of recentChainIds) {
+      if (result.length >= maxDisplayChains) break;
+      if (used.has(recentId)) continue;
+      const chain = chainMap.get(recentId);
+      if (chain) {
+        result.push(chain);
+        used.add(recentId);
+      }
+    }
+    for (const chain of availableChains) {
+      if (result.length >= maxDisplayChains) break;
+      if (used.has(chain.chainId)) continue;
+      result.push(chain);
+    }
+    return result;
+  }, [availableChainIds, recentChainIds, sideChains]);
+  const { enrichedTokens, isLoading } = _chunkGZUTUD5Ocjs.useSupportedTokensWithPricing.call(void 0, 
+    selectedChain === "all" ? "all" : selectedChain
+  );
+  const { tokenRegistry, getToken } = _chunkGZUTUD5Ocjs.useTokenData.call(void 0, );
+  const registrySet = _react.useMemo.call(void 0, () => {
+    const s = /* @__PURE__ */ new Set();
+    for (const t of tokenRegistry) {
+      s.add(`${t.chainId}-${t.address.toLowerCase()}`);
+    }
+    return s;
+  }, [tokenRegistry]);
+  const whitelistedTokens = _react.useMemo.call(void 0, () => {
+    if (!supportedTokensSet) return enrichedTokens;
+    return enrichedTokens.filter(
+      (t) => supportedTokensSet.has(`${t.chainId}-${t.address.toLowerCase()}`)
+    );
+  }, [enrichedTokens, supportedTokensSet]);
+  const tokenList = _react2.default.useMemo(() => {
+    if (!debouncedSearchQuery) return whitelistedTokens;
+    const query = debouncedSearchQuery.toLowerCase();
+    return whitelistedTokens.filter(
+      (token) => (token.symbol || "").toLowerCase().includes(query) || (token.name || "").toLowerCase().includes(query) || token.address.toLowerCase().includes(query)
+    );
+  }, [whitelistedTokens, debouncedSearchQuery]);
+  const sortedTokens = _react2.default.useMemo(() => {
+    const raw = selectedChain === "all" ? (tokenList || []).filter((t) => availableChainIds.includes(t.chainId)) : tokenList || [];
+    const seen = /* @__PURE__ */ new Set();
+    const base = raw.filter((t) => {
+      const k = `${t.chainId}-${t.address.toLowerCase()}`;
+      if (seen.has(k)) return false;
+      seen.add(k);
+      return true;
+    });
+    return [...base].sort((a, b) => {
+      const isAGas = _chunkGZUTUD5Ocjs.isGasToken.call(void 0, a);
+      const isBGas = _chunkGZUTUD5Ocjs.isGasToken.call(void 0, b);
+      if (isAGas && !isBGas) return -1;
+      if (!isAGas && isBGas) return 1;
+      if (a.marketCap && !b.marketCap) return -1;
+      if (!a.marketCap && b.marketCap) return 1;
+      if (!a.marketCap && !b.marketCap) return 0;
+      return b.marketCap - a.marketCap;
+    });
+  }, [tokenList, selectedChain, availableChainIds]);
+  const { balances: walletBalancesData, isLoading: isWalletBalanceLoading } = _chunkGZUTUD5Ocjs.useBulkBalances.call(void 0, userAddress, availableChainIds, void 0, sideTokens.length > 0 ? sideTokens : void 0);
+  const balancesForChain = _react2.default.useMemo(() => {
+    if (!walletBalancesData) return [];
+    const filtered = selectedChain === "all" ? walletBalancesData : walletBalancesData.filter((b) => b.chainId === selectedChain);
+    const seen = /* @__PURE__ */ new Set();
+    return filtered.filter((b) => {
+      const k = `${b.chainId}-${(b.address || "").toLowerCase()}`;
+      if (seen.has(k)) return false;
+      seen.add(k);
+      return true;
+    });
+  }, [walletBalancesData, selectedChain]);
+  const handleSearch = _react.useCallback.call(void 0, (e) => {
+    const query = e.target.value.toLowerCase();
+    const addressInput = _chunkGZUTUD5Ocjs.checkedAddress.call(void 0, query);
+    const store = _chunk6XB5R4GFcjs.useWidgetSwapUIStore.getState();
+    if (addressInput) {
+      store.setAssetSelectionSearch(addressInput);
+      store.setAssetSelectionAddressInput(addressInput);
+    } else {
+      store.setAssetSelectionAddressInput("");
+      store.setAssetSelectionSearch(query);
+    }
+  }, []);
+  const handleFormSelection = _react.useCallback.call(void 0, 
+    async (asset) => {
+      if (side === "base") await setBaseToken(asset);
+      else if (side === "quote") await setQuoteToken(asset);
+      toggle();
+    },
+    [toggle, side, setBaseToken, setQuoteToken]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full h-full flex flex-col pt-2.5", children: [
+    !hideChainsBar && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row justify-between py-1 flex-shrink-0 h-10", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: "flex flex-row items-center w-full h-full px-2.5 whitespace-nowrap font-bold uppercase text-xs cursor-pointer",
+          style: {
+            backgroundColor: selectedChain === "all" && !selectedChainFilter ? "var(--widget-primary)" : "var(--widget-secondary)",
+            color: selectedChain === "all" && !selectedChainFilter ? "var(--widget-primary-foreground)" : "var(--widget-secondary-foreground)",
+            border: "1px solid var(--widget-border)",
+            borderRadius: "var(--widget-radius) 0 0 var(--widget-radius)"
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            _chunk6XB5R4GFcjs.useWidgetSwapUIStore.getState().setAssetSelectionChain("all");
+          },
+          onMouseEnter: () => _optionalChain([onChainHover, 'optionalCall', _7 => _7("All Chains")]),
+          onMouseLeave: () => _optionalChain([onChainHover, 'optionalCall', _8 => _8(null)]),
+          children: "All"
+        }
+      ),
+      DISPLAY_CHAINS.map((chain, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: "flex items-center justify-center px-2 w-full cursor-pointer",
+          style: {
+            backgroundColor: selectedChain === chain.chainId ? "var(--widget-primary)" : "var(--widget-secondary)",
+            color: selectedChain === chain.chainId ? "var(--widget-primary-foreground)" : "var(--widget-secondary-foreground)",
+            borderTop: "1px solid var(--widget-border)",
+            borderBottom: "1px solid var(--widget-border)",
+            borderLeft: index === 0 ? "none" : "1px solid var(--widget-border)",
+            borderRight: "1px solid var(--widget-border)"
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            _chunk6XB5R4GFcjs.useWidgetSwapUIStore.getState().setAssetSelectionChain(chain.chainId);
+          },
+          onMouseEnter: () => _optionalChain([onChainHover, 'optionalCall', _9 => _9(chain.name)]),
+          onMouseLeave: () => _optionalChain([onChainHover, 'optionalCall', _10 => _10(null)]),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-px h-4 w-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZUTUD5Ocjs.ChainIcon_default, { chain: chain.chainId, size: "xs" }) })
+        },
+        chain.chainId
+      )),
+      onMoreChainsClick && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: "flex flex-row cursor-pointer items-center w-full h-full px-2.5 whitespace-nowrap uppercase font-bold text-xs",
+          style: { backgroundColor: "var(--widget-secondary)", color: "var(--widget-secondary-foreground)", border: "1px solid var(--widget-border)", borderRadius: "0 var(--widget-radius) var(--widget-radius) 0" },
+          onClick: (e) => {
+            e.stopPropagation();
+            onMoreChainsClick();
+          },
+          children: "More"
+        }
+      )
+    ] }),
+    showSearch && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative mt-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          className: "w-full h-10 px-4 text-sm",
+          style: { backgroundColor: "var(--widget-card)", color: "var(--widget-card-foreground)", border: "1px solid var(--widget-border)" },
+          placeholder: "Search tokens by name, symbol, or address...",
+          autoComplete: "off",
+          value: searchQuery,
+          onChange: handleSearch
+        }
+      ),
+      searchQuery && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          onClick: () => _chunk6XB5R4GFcjs.useWidgetSwapUIStore.getState().setAssetSelectionSearch(""),
+          className: "absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full px-2 py-1 text-xs",
+          style: {
+            backgroundColor: "var(--widget-secondary)",
+            color: "var(--widget-secondary-foreground)",
+            border: "1px solid var(--widget-border)"
+          },
+          children: "clear"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: "flex-1 min-h-0 overflow-auto mt-2",
+        style: { backgroundColor: "var(--widget-background)" },
+        children: [
+          showBalances && !isWalletBalanceLoading && balancesForChain.length > 0 && !searchQuery && categoryState === "all" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "my-1 ml-4 text-xs", style: { color: "var(--widget-muted-foreground)" }, children: "Your Tokens" }),
+            balancesForChain.filter((a) => {
+              if (!a.assetInfo) return false;
+              if (supportedTokensSet) {
+                return supportedTokensSet.has(`${a.assetInfo.chainId}-${a.assetInfo.address.toLowerCase()}`);
+              }
+              return _chunkGZUTUD5Ocjs.isGasToken.call(void 0, a.assetInfo) || registrySet.has(
+                `${a.assetInfo.chainId}-${a.assetInfo.address.toLowerCase()}`
+              );
+            }).sort((a, b) => {
+              const aToken = getToken(a.chainId, a.address) || a.assetInfo;
+              const bToken = getToken(b.chainId, b.address) || b.assetInfo;
+              const aVal = aToken && a.decimals !== void 0 ? _chunkGZUTUD5Ocjs.calculateDollarizedBalance.call(void 0, aToken, a.balance, a.decimals) : 0;
+              const bVal = bToken && b.decimals !== void 0 ? _chunkGZUTUD5Ocjs.calculateDollarizedBalance.call(void 0, bToken, b.balance, b.decimals) : 0;
+              return bVal - aVal;
+            }).map((asset) => {
+              if (!asset.assetInfo || !otherAsset) return null;
+              return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                AssetSelectionBalanceItem,
+                {
+                  asset,
+                  otherAsset,
+                  handleFormSelection,
+                  getToken
+                },
+                `${asset.assetInfo.chainId}-${asset.assetInfo.address}`
+              );
+            })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "my-2 ml-4 text-xs", style: { color: "var(--widget-muted-foreground)" }, children: searchQuery ? "Search Results" : "Supported Tokens" }),
+          isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { color: "var(--widget-muted-foreground)" }, children: "Loading tokens..." }) }) : sortedTokens.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-3 text-sm", style: { color: "var(--widget-muted-foreground)" }, children: "Token Not Found" }) : sortedTokens.map((token) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              className: "w-full flex items-center justify-between p-3 cursor-pointer",
+              style: { borderBottom: "1px solid var(--widget-border)" },
+              onClick: () => handleFormSelection(token),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleFormSelection(token);
+                }
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center space-x-3 min-w-0 flex-1", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZUTUD5Ocjs.TokenImage_default, { asset: token, size: "md", className: "flex-shrink-0" }),
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-base font-medium truncate", style: { color: "var(--widget-foreground)" }, children: (token.symbol || "").length > 20 ? `${token.symbol.substring(0, 20)}...` : token.symbol || "\u2014" }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm truncate", style: { color: "var(--widget-muted-foreground)" }, children: (token.name || "").length > 20 ? `${token.name.substring(0, 20)}...` : token.name || "\u2014" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-end text-right flex-shrink-0", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-mono", style: { color: "var(--widget-foreground)" }, children: token.price ? `$${token.price >= 999999 ? `${(token.price / 1e6).toFixed(2)}M` : token.price.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: token.price < 1 ? 5 : 2 })}` : "\u2014" }),
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-xs font-mono", style: { color: "var(--widget-muted-foreground)" }, children: [
+                    _optionalChain([token, 'access', _11 => _11.address, 'optionalAccess', _12 => _12.slice, 'call', _13 => _13(0, 6)]),
+                    "...",
+                    _optionalChain([token, 'access', _14 => _14.address, 'optionalAccess', _15 => _15.slice, 'call', _16 => _16(-4)])
+                  ] })
+                ] })
+              ]
+            },
+            `${token.chainId}-${token.address}`
+          ))
+        ]
+      }
+    )
+  ] });
+};
+var AssetSelectionMenu_default = AssetSelectionMenu;
+
+
+
+exports.AssetSelectionMenu_default = AssetSelectionMenu_default;
+//# sourceMappingURL=chunk-3E6RNP2D.cjs.map

package/dist/chunk-3E6RNP2D.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/flooreyes/mega-swap-widget/dist/chunk-3E6RNP2D.cjs","../src/components/AssetSelectionMenu.tsx","../src/components/AssetSelectionBalanceItem.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"/Users/flooreyes/mega-swap-widget/dist/chunk-3E6RNP2D.cjs","sourcesContent":[null,"'use client';\n\nimport { useSwapFormContext } from '../providers/SwapFormProvider';\nimport { useWidgetSwapUIStore } from '../stores/swapUIStore';\nimport type { Asset, SupportedChainId, TokenSelectCategory } from '../internal/types';\nimport { getAvailableChainConfigs, isGasToken } from '../internal/chainsConfig';\nimport { checkedAddress, calculateDollarizedBalance } from '../internal/helpers';\nimport { useDebounce } from '../internal/hooks/useDebounce';\nimport { useSupportedTokensWithPricing, useTokenData } from '../internal/queries/tokens/hooks';\nimport { useBulkBalances } from '../internal/queries/balances/hooks';\nimport TokenImage from '../internal/components/TokenImage';\nimport ChainIcon from '../internal/components/ChainIcon';\nimport { useWalletState } from '../wallet/useWalletState';\nimport { useWidgetConfig } from '../context/WidgetConfigContext';\nimport { useEnabledChainIds } from '../hooks/useEnabledChainIds';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { AssetSelectionBalanceItem } from './AssetSelectionBalanceItem';\n\ninterface AssetSelectionMenuProps {\n  toggle: () => void;\n  side: 'base' | 'quote';\n  otherAsset: Asset | null;\n  containerHeight?: string;\n  onChainHover?: (chainName: string | null) => void;\n  onMoreChainsClick?: () => void;\n  selectedChainFilter?: SupportedChainId | null;\n}\n\nconst AssetSelectionMenu: React.FC<AssetSelectionMenuProps> = ({\n  toggle,\n  side,\n  otherAsset,\n  containerHeight,\n  onChainHover,\n  onMoreChainsClick,\n  selectedChainFilter,\n}) => {\n  const { address: userAddress } = useWalletState();\n\n  const {\n    assetSelectionSearch: searchQuery,\n    assetSelectionChain: selectedChain,\n    assetSelectionCategory: categoryState,\n    recentChainIds,\n  } = useWidgetSwapUIStore(\n    useShallow((state) => ({\n      assetSelectionSearch: state.assetSelectionSearch,\n      assetSelectionChain: state.assetSelectionChain,\n      assetSelectionCategory: state.assetSelectionCategory,\n      recentChainIds: state.recentChainIds,\n    })),\n  );\n\n  const debouncedSearchQuery = useDebounce(searchQuery, 300);\n  const availableChainIds = useEnabledChainIds();\n  const { supportedInputTokens, supportedOutputTokens, supportedInputChains, supportedOutputChains, inputSelectionSearch, outputSelectionSearch, showInputSelectionTokenBalances, showOutputSelectionTokenBalances } = useWidgetConfig();\n  const showSearch = side === 'base' ? inputSelectionSearch : outputSelectionSearch;\n  const showBalances = side === 'base' ? showInputSelectionTokenBalances : showOutputSelectionTokenBalances;\n  const { setBaseToken, setQuoteToken } = useSwapFormContext();\n\n  const sideTokens = side === 'base' ? supportedInputTokens : supportedOutputTokens;\n  const sideChains = side === 'base' ? supportedInputChains : supportedOutputChains;\n  const hideChainsBar = sideChains.length === 1;\n\n  const supportedTokensSet = useMemo(() => {\n    if (sideTokens.length === 0) return null;\n    const s = new Set<string>();\n    for (const t of sideTokens) {\n      s.add(`${t.chainId}-${t.address.toLowerCase()}`);\n    }\n    return s;\n  }, [sideTokens]);\n\n  useEffect(() => {\n    if (hideChainsBar) {\n      useWidgetSwapUIStore.getState().setAssetSelectionChain(sideChains[0] as SupportedChainId);\n    } else if (selectedChainFilter) {\n      useWidgetSwapUIStore.getState().setAssetSelectionChain(selectedChainFilter);\n    }\n  }, [selectedChainFilter, hideChainsBar, sideChains]);\n\n  const DISPLAY_CHAINS = React.useMemo(() => {\n    const MEGAETH_CHAIN_ID = 4326;\n    const maxDisplayChains = 5;\n    const sideChainSet = sideChains.length > 0 ? new Set(sideChains) : null;\n    const availableChains = getAvailableChainConfigs(availableChainIds)\n      .filter((c) => !sideChainSet || sideChainSet.has(c.id))\n      .map((c) => ({ chainId: c.id, name: c.displayName }));\n    const chainMap = new Map(availableChains.map((c) => [c.chainId, c]));\n    const result: typeof availableChains = [];\n    const used = new Set<number>();\n    const megaEth = chainMap.get(MEGAETH_CHAIN_ID);\n    if (megaEth) { result.push(megaEth); used.add(MEGAETH_CHAIN_ID); }\n    for (const recentId of recentChainIds) {\n      if (result.length >= maxDisplayChains) break;\n      if (used.has(recentId as number)) continue;\n      const chain = chainMap.get(recentId as number);\n      if (chain) { result.push(chain); used.add(recentId as number); }\n    }\n    for (const chain of availableChains) {\n      if (result.length >= maxDisplayChains) break;\n      if (used.has(chain.chainId)) continue;\n      result.push(chain);\n    }\n    return result;\n  }, [availableChainIds, recentChainIds, sideChains]);\n\n  const { enrichedTokens, isLoading } = useSupportedTokensWithPricing(\n    selectedChain === 'all' ? 'all' : selectedChain,\n  );\n  const { tokenRegistry, getToken } = useTokenData();\n\n  const registrySet = useMemo(() => {\n    const s = new Set<string>();\n    for (const t of tokenRegistry) {\n      s.add(`${t.chainId}-${t.address.toLowerCase()}`);\n    }\n    return s;\n  }, [tokenRegistry]);\n\n  const whitelistedTokens = useMemo(() => {\n    if (!supportedTokensSet) return enrichedTokens;\n    return enrichedTokens.filter((t) =>\n      supportedTokensSet.has(`${t.chainId}-${t.address.toLowerCase()}`),\n    );\n  }, [enrichedTokens, supportedTokensSet]);\n\n  const tokenList = React.useMemo(() => {\n    if (!debouncedSearchQuery) return whitelistedTokens;\n    const query = debouncedSearchQuery.toLowerCase();\n    return whitelistedTokens.filter(\n      (token) =>\n        (token.symbol || '').toLowerCase().includes(query) ||\n        (token.name || '').toLowerCase().includes(query) ||\n        token.address.toLowerCase().includes(query),\n    );\n  }, [whitelistedTokens, debouncedSearchQuery]);\n\n  const sortedTokens = React.useMemo(() => {\n    const raw = selectedChain === 'all'\n      ? (tokenList || []).filter((t) => availableChainIds.includes(t.chainId))\n      : (tokenList || []);\n    const seen = new Set<string>();\n    const base = raw.filter((t) => {\n      const k = `${t.chainId}-${t.address.toLowerCase()}`;\n      if (seen.has(k)) return false;\n      seen.add(k);\n      return true;\n    });\n    return [...base].sort((a, b) => {\n      const isAGas = isGasToken(a);\n      const isBGas = isGasToken(b);\n      if (isAGas && !isBGas) return -1;\n      if (!isAGas && isBGas) return 1;\n      if (a.marketCap && !b.marketCap) return -1;\n      if (!a.marketCap && b.marketCap) return 1;\n      if (!a.marketCap && !b.marketCap) return 0;\n      return b.marketCap! - a.marketCap!;\n    });\n  }, [tokenList, selectedChain, availableChainIds]);\n\n  const { balances: walletBalancesData, isLoading: isWalletBalanceLoading } =\n    useBulkBalances(userAddress, availableChainIds, undefined, sideTokens.length > 0 ? sideTokens : undefined);\n\n  const balancesForChain = React.useMemo(() => {\n    if (!walletBalancesData) return [];\n    const filtered = selectedChain === 'all' ? walletBalancesData : walletBalancesData.filter((b) => b.chainId === selectedChain);\n    const seen = new Set<string>();\n    return filtered.filter((b) => {\n      const k = `${b.chainId}-${(b.address || '').toLowerCase()}`;\n      if (seen.has(k)) return false;\n      seen.add(k);\n      return true;\n    });\n  }, [walletBalancesData, selectedChain]);\n\n  const handleSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const query = e.target.value.toLowerCase();\n    const addressInput = checkedAddress(query);\n    const store = useWidgetSwapUIStore.getState();\n    if (addressInput) {\n      store.setAssetSelectionSearch(addressInput);\n      store.setAssetSelectionAddressInput(addressInput);\n    } else {\n      store.setAssetSelectionAddressInput('');\n      store.setAssetSelectionSearch(query);\n    }\n  }, []);\n\n  const handleFormSelection = useCallback(\n    async (asset: Asset) => {\n      if (side === 'base') await setBaseToken(asset);\n      else if (side === 'quote') await setQuoteToken(asset);\n      toggle();\n    },\n    [toggle, side, setBaseToken, setQuoteToken],\n  );\n\n  return (\n    <div className=\"w-full h-full flex flex-col pt-2.5\">\n      {!hideChainsBar && (\n        <div className=\"flex flex-row justify-between py-1 flex-shrink-0 h-10\">\n          <button\n            type=\"button\"\n            className=\"flex flex-row items-center w-full h-full px-2.5 whitespace-nowrap font-bold uppercase text-xs cursor-pointer\"\n            style={{\n              backgroundColor: selectedChain === 'all' && !selectedChainFilter ? 'var(--widget-primary)' : 'var(--widget-secondary)',\n              color: selectedChain === 'all' && !selectedChainFilter ? 'var(--widget-primary-foreground)' : 'var(--widget-secondary-foreground)',\n              border: '1px solid var(--widget-border)',\n              borderRadius: 'var(--widget-radius) 0 0 var(--widget-radius)',\n            }}\n            onClick={(e) => { e.stopPropagation(); useWidgetSwapUIStore.getState().setAssetSelectionChain('all'); }}\n            onMouseEnter={() => onChainHover?.('All Chains')}\n            onMouseLeave={() => onChainHover?.(null)}\n          >\n            All\n          </button>\n          {DISPLAY_CHAINS.map((chain, index) => (\n            <button\n              key={chain.chainId}\n              type=\"button\"\n              className=\"flex items-center justify-center px-2 w-full cursor-pointer\"\n              style={{\n                backgroundColor: selectedChain === chain.chainId ? 'var(--widget-primary)' : 'var(--widget-secondary)',\n                color: selectedChain === chain.chainId ? 'var(--widget-primary-foreground)' : 'var(--widget-secondary-foreground)',\n                borderTop: '1px solid var(--widget-border)',\n                borderBottom: '1px solid var(--widget-border)',\n                borderLeft: index === 0 ? 'none' : '1px solid var(--widget-border)',\n                borderRight: '1px solid var(--widget-border)',\n              }}\n              onClick={(e) => {\n                e.stopPropagation();\n                useWidgetSwapUIStore.getState().setAssetSelectionChain(chain.chainId as SupportedChainId);\n              }}\n              onMouseEnter={() => onChainHover?.(chain.name)}\n              onMouseLeave={() => onChainHover?.(null)}\n            >\n              <div className=\"mb-px h-4 w-4\">\n                <ChainIcon chain={chain.chainId} size=\"xs\" />\n              </div>\n            </button>\n          ))}\n          {onMoreChainsClick && (\n            <button\n              type=\"button\"\n              className=\"flex flex-row cursor-pointer items-center w-full h-full px-2.5 whitespace-nowrap uppercase font-bold text-xs\"\n              style={{ backgroundColor: 'var(--widget-secondary)', color: 'var(--widget-secondary-foreground)', border: '1px solid var(--widget-border)', borderRadius: '0 var(--widget-radius) var(--widget-radius) 0' }}\n              onClick={(e) => { e.stopPropagation(); onMoreChainsClick(); }}\n            >\n              More\n            </button>\n          )}\n        </div>\n      )}\n\n      {showSearch && (\n        <div className=\"flex-shrink-0\">\n          <div className=\"relative mt-1\">\n            <input\n              className=\"w-full h-10 px-4 text-sm\"\n              style={{ backgroundColor: 'var(--widget-card)', color: 'var(--widget-card-foreground)', border: '1px solid var(--widget-border)' }}\n              placeholder=\"Search tokens by name, symbol, or address...\"\n              autoComplete=\"off\"\n              value={searchQuery}\n              onChange={handleSearch}\n            />\n            {searchQuery && (\n              <button\n                type=\"button\"\n                onClick={() => useWidgetSwapUIStore.getState().setAssetSelectionSearch('')}\n                className=\"absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full px-2 py-1 text-xs\"\n                style={{\n                  backgroundColor: 'var(--widget-secondary)',\n                  color: 'var(--widget-secondary-foreground)',\n                  border: '1px solid var(--widget-border)',\n                }}\n              >\n                clear\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n\n      <div\n        className=\"flex-1 min-h-0 overflow-auto mt-2\"\n        style={{ backgroundColor: 'var(--widget-background)' }}\n      >\n        {showBalances && !isWalletBalanceLoading && balancesForChain.length > 0 && !searchQuery && categoryState === 'all' && (\n          <div>\n            <p className=\"my-1 ml-4 text-xs\" style={{ color: 'var(--widget-muted-foreground)' }}>Your Tokens</p>\n            {balancesForChain\n              .filter((a) => {\n                if (!a.assetInfo) return false;\n                if (supportedTokensSet) {\n                  return supportedTokensSet.has(`${a.assetInfo.chainId}-${a.assetInfo.address.toLowerCase()}`);\n                }\n                return isGasToken(a.assetInfo) || registrySet.has(\n                  `${a.assetInfo.chainId}-${a.assetInfo.address.toLowerCase()}`,\n                );\n              })\n              .sort((a, b) => {\n                const aToken = getToken(a.chainId, a.address) || a.assetInfo;\n                const bToken = getToken(b.chainId, b.address) || b.assetInfo;\n                const aVal = aToken && a.decimals !== undefined ? calculateDollarizedBalance(aToken, a.balance, a.decimals) : 0;\n                const bVal = bToken && b.decimals !== undefined ? calculateDollarizedBalance(bToken, b.balance, b.decimals) : 0;\n                return bVal - aVal;\n              })\n              .map((asset) => {\n                if (!asset.assetInfo || !otherAsset) return null;\n                return (\n                  <AssetSelectionBalanceItem\n                    key={`${asset.assetInfo.chainId}-${asset.assetInfo.address}`}\n                    asset={asset}\n                    otherAsset={otherAsset}\n                    handleFormSelection={handleFormSelection}\n                    getToken={getToken}\n                  />\n                );\n              })}\n          </div>\n        )}\n\n        <p className=\"my-2 ml-4 text-xs\" style={{ color: 'var(--widget-muted-foreground)' }}>\n          {searchQuery ? 'Search Results' : 'Supported Tokens'}\n        </p>\n\n        {isLoading ? (\n          <div className=\"flex items-center justify-center p-8\">\n            <span style={{ color: 'var(--widget-muted-foreground)' }}>Loading tokens...</span>\n          </div>\n        ) : sortedTokens.length === 0 ? (\n          <div className=\"px-4 py-3 text-sm\" style={{ color: 'var(--widget-muted-foreground)' }}>Token Not Found</div>\n        ) : (\n          sortedTokens.map((token) => (\n            <div\n              key={`${token.chainId}-${token.address}`}\n              role=\"button\"\n              tabIndex={0}\n              className=\"w-full flex items-center justify-between p-3 cursor-pointer\"\n              style={{ borderBottom: '1px solid var(--widget-border)' }}\n              onClick={() => handleFormSelection(token)}\n              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleFormSelection(token); } }}\n            >\n              <div className=\"flex items-center space-x-3 min-w-0 flex-1\">\n                <TokenImage asset={token} size=\"md\" className=\"flex-shrink-0\" />\n                <div className=\"flex flex-col items-start min-w-0 flex-1\">\n                  <span className=\"text-base font-medium truncate\" style={{ color: 'var(--widget-foreground)' }}>\n                    {(token.symbol || '').length > 20 ? `${token.symbol.substring(0, 20)}...` : (token.symbol || '—')}\n                  </span>\n                  <span className=\"text-sm truncate\" style={{ color: 'var(--widget-muted-foreground)' }}>\n                    {(token.name || '').length > 20 ? `${token.name.substring(0, 20)}...` : (token.name || '—')}\n                  </span>\n                </div>\n              </div>\n              <div className=\"flex flex-col items-end text-right flex-shrink-0\">\n                <span className=\"text-xs font-mono\" style={{ color: 'var(--widget-foreground)' }}>\n                  {token.price ? `$${token.price >= 999999 ? `${(token.price / 1e6).toFixed(2)}M` : token.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: token.price < 1 ? 5 : 2 })}` : '—'}\n                </span>\n                <span className=\"text-xs font-mono\" style={{ color: 'var(--widget-muted-foreground)' }}>\n                  {token.address?.slice(0, 6)}...{token.address?.slice(-4)}\n                </span>\n              </div>\n            </div>\n          ))\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default AssetSelectionMenu;\n","'use client';\n\nimport {\n  TokenImage,\n  useTokenWithLazyLoad,\n  type Asset,\n  calculateDollarizedBalance,\n  isGasToken,\n} from '../internal';\nimport React from 'react';\n\ninterface AssetSelectionBalanceItemProps {\n  asset: {\n    assetInfo?: Asset | null;\n    balance: string;\n    decimals: number;\n    chainId: number;\n    address: string;\n  };\n  otherAsset: Asset;\n  handleFormSelection: (asset: Asset, otherAsset: Asset) => void;\n  getToken: (chainId: number, address: string) => Asset | undefined;\n}\n\nexport const AssetSelectionBalanceItem = React.memo<AssetSelectionBalanceItemProps>(\n  ({ asset, otherAsset, handleFormSelection, getToken }) => {\n    const { token: lazyToken } = useTokenWithLazyLoad(asset.chainId, asset.address);\n    const cachedToken = getToken(asset.chainId, asset.address);\n    const token = lazyToken || cachedToken || asset.assetInfo;\n\n    if (!token) return null;\n\n    const hasPrice = token.price != null;\n    const dollarValue =\n      hasPrice && asset.decimals !== undefined\n        ? calculateDollarizedBalance(token, asset.balance, asset.decimals)\n        : null;\n\n    return (\n      <button\n        key={`${token.chainId}-${token.address}`}\n        type=\"button\"\n        className=\"w-full flex items-center justify-between p-3 cursor-pointer\"\n        style={{ borderBottom: '1px solid var(--widget-border)' }}\n        onClick={() => handleFormSelection(token, otherAsset)}\n      >\n        <div className=\"flex items-center space-x-3 min-w-0 flex-1\">\n          <TokenImage asset={token} size=\"md\" className=\"flex-shrink-0\" />\n          <div className=\"flex flex-col items-start min-w-0 flex-1\">\n            <span className=\"text-base font-medium\" style={{ color: 'var(--widget-foreground)' }}>\n              {token.symbol.length > 20 ? `${token.symbol.substring(0, 20)}...` : token.symbol}\n            </span>\n            <span className=\"text-sm\" style={{ color: 'var(--widget-foreground)', opacity: 0.6 }}>\n              {token.name.length > 20 ? `${token.name.substring(0, 20)}...` : token.name}\n            </span>\n          </div>\n        </div>\n        <div className=\"flex flex-col items-end text-right flex-shrink-0\">\n          <span className=\"text-xs font-mono\" style={{ color: 'var(--widget-foreground)', opacity: 0.5 }}>Balance:</span>\n          <span className=\"text-xs font-mono\" style={{ color: 'var(--widget-foreground)' }}>\n            {dollarValue != null ? `$${dollarValue.toFixed(2)}` : '—'}\n          </span>\n        </div>\n      </button>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.asset.address === nextProps.asset.address &&\n    prevProps.asset.chainId === nextProps.asset.chainId &&\n    prevProps.asset.balance === nextProps.asset.balance &&\n    prevProps.asset.assetInfo?.price === nextProps.asset.assetInfo?.price &&\n    prevProps.otherAsset.address === nextProps.otherAsset.address,\n);\n\nAssetSelectionBalanceItem.displayName = 'AssetSelectionBalanceItem';\n"]}