e.stopPropagation()}>
-
- {Object.values(MobulaChainNames).map((chain) => {
- const isSelected = chains === chain;
- const isAll = chain === MobulaChainNames.All;
- let logo = null;
- if (isAll) {
- logo = (
-
- 
-
- );
- } else {
- const chainId = chainNameToChainIdTokensData(chain);
- logo = (
- })
- );
- }
- return (
- ();
+ const symbolToAssetId = new Map();
+
+ // First pass: collect all assets with IDs and map symbols to IDs
+ assets.forEach((asset) => {
+ if (asset.id) {
+ const key = `id-${asset.id}`;
+ symbolToAssetId.set(asset.symbol.toUpperCase(), asset.id);
+
+ const existing = assetMap.get(key);
+ if (!existing) {
+ assetMap.set(key, asset);
+ } else {
+ mergeMultiChainData(existing, asset);
+ }
+ }
+ });
+
+ // Second pass: add assets without IDs only if they don't duplicate an existing asset
+ assets.forEach((asset) => {
+ if (!asset.id) {
+ const symbol = asset.symbol.toUpperCase();
+
+ // Check if this symbol already has an asset with an ID
+ if (symbolToAssetId.has(symbol)) {
+ // Skip this asset - it's a duplicate of an asset-type entry
+ return;
+ }
+
+ // No ID-based asset exists, so add this token
+ const key = `symbol-${symbol}`;
+ const existing = assetMap.get(key);
+
+ if (!existing) {
+ assetMap.set(key, asset);
+ } else {
+ mergeMultiChainData(existing, asset);
+ }
+ }
+ });
+
+ return Array.from(assetMap.values());
+}
+
export function parseSearchData(
searchData: TokenAssetResponse[] | PairResponse[],
- chains: MobulaChainNames
+ chains: MobulaChainNames,
+ searchTerm: string = ''
) {
const assets: Asset[] = [];
- const markets: Asset[] = [];
+ const markets: Market[] = [];
+
searchData.forEach((item) => {
if (item.type === 'asset') {
- assets.push(...parseAssetData(item as TokenAssetResponse, chains));
+ const assetResponse = item as TokenAssetResponse;
+ // Only add to assets if it's an asset type
+ assets.push(...parseAssetData(assetResponse, chains));
+ // Extract market pairs from asset's pairs field
+ markets.push(...parseMarketPairs(assetResponse, searchTerm, chains));
} else if (item.type === 'token') {
- assets.push(...parseTokenData(item as TokenAssetResponse));
+ const tokenResponse = item as TokenAssetResponse;
+ // Token types should NOT be added to assets - they only contribute markets
+ // assets.push(...parseTokenData(tokenResponse)); // REMOVED
+ // Extract market pairs from token's pairs field
+ markets.push(...parseMarketPairs(tokenResponse, searchTerm, chains));
+ } else if ('token0' in item && 'token1' in item) {
+ // This is a PairResponse
+ markets.push(parsePairResponse(item as PairResponse));
}
});
- return { assets, markets };
+ // Deduplicate assets by ID
+ const deduplicatedAssets = deduplicateAssetsBySymbol(assets);
+
+ // Filter out assets with 0 volume or 0 market cap
+ const filteredAssets = deduplicatedAssets.filter((asset) => {
+ const hasValidVolume = asset.volume && asset.volume > 0;
+ const hasValidMCap = asset.mCap && asset.mCap > 0;
+ return hasValidVolume && hasValidMCap;
+ });
+
+ // Deduplicate markets by address + blockchain
+ const uniqueMarkets = Array.from(
+ new Map(markets.map((m) => [`${m.address}-${m.blockchain}`, m])).values()
+ );
+
+ // Sort assets and markets
+ const sortedAssets = searchTerm
+ ? sortAssets(filteredAssets, searchTerm)
+ : filteredAssets;
+ const sortedMarkets = searchTerm
+ ? sortMarkets(uniqueMarkets, searchTerm)
+ : uniqueMarkets;
+
+ return { assets: sortedAssets, markets: sortedMarkets };
}
export function parseFreshAndTrendingTokens(
projections: Projection[]
): Asset[] {
- const res: Asset[] = [];
+ const assetsBySymbol = new Map();
+
for (const projection of projections) {
const chainId = projection.id.split('-')[1];
- const { rows } = projection.data as TokensMarketData;
+ const marketData = projection.data as TokensMarketData | undefined;
+ const rows = marketData?.rows;
if (rows) {
for (const j of rows) {
const contractAddress = j.leftColumn?.line1?.copyLink || '';
const symbol = j.leftColumn?.line1?.text2 || '';
- const normalizedContract = normalizeContractAddress(
- contractAddress,
- symbol,
- +chainId
- );
+ const name = j.leftColumn?.line1?.text1 || '';
- // Filter out wrapped native tokens (WETH, WBNB, WPOL, etc.) from search results
+ // Filter out wrapped native tokens
if (!isWrappedNativeToken(contractAddress, +chainId)) {
- res.push({
- chain: getChainName(+chainId),
- contract: normalizedContract,
- decimals: j.meta?.tokenData.decimals || 18,
- liquidity: parseNumberString(
- j.leftColumn?.line2?.liquidity || '0.00K'
- ),
- logo: j.leftColumn?.token?.primaryImage || null,
- name: j.leftColumn?.line1?.text1 || '',
- price: Number(j.rightColumn?.line1?.price || 0),
- priceChange24h:
- Number((j.rightColumn?.line1?.percentage || '0%').slice(0, -1)) *
- (j.rightColumn?.line1?.direction === 'DOWN' ? -1 : 1),
- symbol,
- volume: parseNumberString(j.leftColumn?.line2?.volume || '0.00K'),
- mCap: j.meta?.tokenData.marketCap || 0,
- timestamp: j.leftColumn?.line2?.timestamp,
- });
+ const volume = parseNumberString(
+ j.leftColumn?.line2?.volume || '0.00K'
+ );
+ const mCap = j.meta?.tokenData.marketCap || 0;
+
+ // Only process assets with non-zero volume
+ if (volume !== 0) {
+ const chain = getChainName(+chainId);
+ const timestamp = j.leftColumn?.line2?.timestamp;
+
+ // Create a unique key by symbol (or name if symbol is empty)
+ const key = symbol || name;
+
+ if (assetsBySymbol.has(key)) {
+ // Asset already exists, aggregate data
+ const existing = assetsBySymbol.get(key)!;
+
+ // Add volume and mCap across chains
+ existing.volume = (existing.volume || 0) + volume;
+ existing.mCap = (existing.mCap || 0) + mCap;
+
+ // Keep the newest timestamp for Fresh sorting
+ if (
+ timestamp &&
+ (!existing.timestamp || timestamp > existing.timestamp)
+ ) {
+ existing.timestamp = timestamp;
+ }
+
+ // Add this chain to allChains
+ if (existing.allChains && !existing.allChains.includes(chain)) {
+ existing.allChains.push(chain);
+ existing.allContracts?.push(contractAddress);
+ existing.allDecimals?.push(j.meta?.tokenData.decimals || 18);
+ }
+ } else {
+ // New asset, create entry
+ assetsBySymbol.set(key, {
+ chain,
+ contract: contractAddress,
+ decimals: j.meta?.tokenData.decimals || 18,
+ liquidity: parseNumberString(
+ j.leftColumn?.line2?.liquidity || '0.00K'
+ ),
+ logo: j.leftColumn?.token?.primaryImage || null,
+ name,
+ price: Number(j.rightColumn?.line1?.price || 0),
+ priceChange24h:
+ Number(
+ (j.rightColumn?.line1?.percentage || '0%').slice(0, -1)
+ ) * (j.rightColumn?.line1?.direction === 'DOWN' ? -1 : 1),
+ symbol,
+ volume,
+ mCap,
+ timestamp,
+ // Store all chains for multi-chain selection
+ allChains: [chain],
+ allContracts: [contractAddress],
+ allDecimals: [j.meta?.tokenData.decimals || 18],
+ });
+ }
+ }
}
}
}
}
- return res;
+
+ // Convert map to array
+ const assets = Array.from(assetsBySymbol.values());
+
+ // Filter out assets with 0 volume or 0 market cap
+ const filteredAssets = assets.filter((asset) => {
+ const hasValidVolume = asset.volume && asset.volume > 0;
+ const hasValidMCap = asset.mCap && asset.mCap > 0;
+ return hasValidVolume && hasValidMCap;
+ });
+
+ return filteredAssets;
}
diff --git a/src/store.ts b/src/store.ts
index ee36bf6a..7d68fae5 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -21,7 +21,16 @@ import { pillarXApiWaitlist } from './services/pillarXApiWaitlist';
// Initialisation
const dynamicMiddleware = createDynamicMiddleware();
-const middlewareReducers: { [key: string]: Reducer } = {};
+
+const initialReducers = {
+ [swapSlice.reducerPath]: swapSlice.reducer,
+ [tokenAtlasSlice.reducerPath]: tokenAtlasSlice.reducer,
+ [depositSlice.reducerPath]: depositSlice.reducer,
+ [walletPortfolioSlice.reducerPath]: walletPortfolioSlice.reducer,
+ [leaderboardSlice.reducerPath]: leaderboardSlice.reducer,
+};
+
+const middlewareReducers: { [key: string]: Reducer } = { ...initialReducers };
/**
* @name addReducer
@@ -66,7 +75,7 @@ export const store = configureStore({
// Empty reducer for now - the addMiddleware function
// below will dynamically regenerate the reducers required
// from the middleware functions.
- reducer: {},
+ reducer: initialReducers,
// Adding the api middleware enables caching, invalidation, polling,
// and other useful features of `rtk-query`.
// Note: here we have added dynamicMiddleware.middleware
@@ -84,11 +93,6 @@ export const store = configureStore({
addMiddleware(pillarXApiWaitlist);
addMiddleware(pillarXApiPresence);
addMiddleware(pillarXApiTransactionsHistory);
-addReducer(swapSlice);
-addReducer(tokenAtlasSlice);
-addReducer(depositSlice);
-addReducer(walletPortfolioSlice);
-addReducer(leaderboardSlice);
// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
{
- setChains(chain);
- setShowChainOverlay(false);
- setOverlayStyle({});
- }}
- style={{
- display: 'flex',
- alignItems: 'center',
- gap: 8,
- padding: '10px 18px',
- cursor: 'pointer',
- background: isSelected ? '#29292F' : 'transparent',
- color: isSelected ? '#fff' : '#b0b0b0',
- fontWeight: isSelected ? 500 : 400,
- fontSize: 16,
- position: 'relative',
- }}
- >
- {logo}
-
- {chain === MobulaChainNames.All ? 'All chains' : chain}
-
- {isSelected && (
- >;
isBuy: boolean;
@@ -59,6 +76,7 @@ const overlayStyling = {
padding: 0,
overflow: 'hidden',
zIndex: 2000,
+ position: 'fixed' as const,
};
export default function Search({
@@ -78,18 +96,84 @@ export default function Search({
isBuy,
chains,
});
- const [searchType, setSearchType] = useState();
+ const [searchType, setSearchType] = useState(
+ isBuy ? SearchType.Trending : undefined
+ );
const [isLoading, setIsLoading] = useState(false);
+ const [isError, setIsError] = useState(false);
const [parsedAssets, setParsedAssets] = useState();
+ const MIN_LIQUIDITY_THRESHOLD = 1000;
- let list;
+ // Sorting state for search results
+ const [searchSort, setSearchSort] = useState<{
+ mCap?: SortType;
+ volume?: SortType;
+ price?: SortType;
+ priceChange24h?: SortType;
+ }>({});
+
+ // Store sorted search results
+ const [sortedSearchAssets, setSortedSearchAssets] = useState();
+
+ let list: { assets: Asset[]; markets: Market[] } | undefined;
if (searchData?.result.data) {
- list = parseSearchData(searchData?.result.data!, chains);
+ list = parseSearchData(searchData.result.data, chains, searchText);
}
+ // Update sorted assets when search results change
+ useEffect(() => {
+ if (list?.assets) {
+ setSortedSearchAssets([...list.assets]);
+ } else {
+ setSortedSearchAssets(undefined);
+ }
+ // Reset sort when search changes
+ setSearchSort({});
+ // Reset error state when new search is initiated
+ setIsError(false);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [searchText, searchData]);
+
+ // Sorting handler for search results
+ const handleSearchSortChange = (
+ key: 'mCap' | 'volume' | 'price' | 'priceChange24h'
+ ) => {
+ if (!sortedSearchAssets) return;
+
+ const currentSort = searchSort[key];
+ let sortType = SortType.Up;
+ if (currentSort === SortType.Down) {
+ sortType = SortType.Up;
+ } else if (currentSort === SortType.Up) {
+ sortType = SortType.Down;
+ }
+
+ const sorted = [...sortedSearchAssets].sort((a, b) => {
+ if (sortType === SortType.Up) {
+ return (b[key] || 0) - (a[key] || 0);
+ }
+ return (a[key] || 0) - (b[key] || 0);
+ });
+
+ setSortedSearchAssets(sorted);
+ setSearchSort({
+ mCap: undefined,
+ price: undefined,
+ priceChange24h: undefined,
+ volume: undefined,
+ [key]: sortType,
+ });
+ };
+
+ // Apply liquidity filter automatically
+ const filteredMarkets = list?.markets
+ ? filterMarketsByLiquidity(list.markets, MIN_LIQUIDITY_THRESHOLD)
+ : [];
+
const inputRef = useRef(null);
const [showChainOverlay, setShowChainOverlay] = useState(false);
const chainButtonRef = useRef(null);
+ const chainOverlayRef = useRef(null);
const [overlayStyle, setOverlayStyle] = useState({});
const searchModalRef = useRef(null);
@@ -158,10 +242,12 @@ export default function Search({
// Click outside to close functionality
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
- if (
- searchModalRef.current &&
- !searchModalRef.current.contains(event.target as Node)
- ) {
+ const target = event.target as Node;
+ const clickedInsideModal = searchModalRef.current?.contains(target);
+ const clickedInsideChainOverlay =
+ chainOverlayRef.current?.contains(target);
+
+ if (!clickedInsideModal && !clickedInsideChainOverlay) {
handleClose();
}
};
@@ -196,6 +282,16 @@ export default function Search({
.then((response) => response.json())
.then((result) => {
const assets = parseFreshAndTrendingTokens(result.projection);
+
+ // Sort based on search type
+ if (searchType === SearchType.Trending) {
+ // Sort by volume (descending - highest first)
+ assets.sort((a, b) => (b.volume || 0) - (a.volume || 0));
+ } else if (searchType === SearchType.Fresh) {
+ // Sort by timestamp (descending - newest first)
+ assets.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+ }
+
setParsedAssets(assets);
setIsLoading(false);
})
@@ -206,6 +302,68 @@ export default function Search({
}
}, [searchType, chains]);
+ // Comprehensive refresh handler
+ const handleRefresh = () => {
+ // Refetch wallet portfolio if available
+ if (refetchWalletPortfolio) {
+ refetchWalletPortfolio();
+ }
+
+ // Refetch Trending/Fresh/Top Gainers data if applicable
+ if (searchType && searchType !== SearchType.MyHoldings) {
+ setIsLoading(true);
+ setParsedAssets(undefined);
+ fetch(`${getUrl(searchType)}?chainIds=${getChainId(chains)}`)
+ .then((response) => response.json())
+ .then((result) => {
+ const assets = parseFreshAndTrendingTokens(result.projection);
+
+ // Sort based on search type
+ if (searchType === SearchType.Trending) {
+ // Sort by volume (descending - highest first)
+ assets.sort((a, b) => (b.volume || 0) - (a.volume || 0));
+ } else if (searchType === SearchType.Fresh) {
+ // Sort by timestamp (descending - newest first)
+ assets.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+ }
+
+ setParsedAssets(assets);
+ setIsLoading(false);
+ })
+ .catch((err) => {
+ setIsLoading(false);
+ setIsError(true);
+ console.error(err);
+ });
+ }
+ };
+
+ /**
+ * Get the chain with the highest stable currency balance from portfolio data
+ * Used for multi-chain asset selection
+ */
+ const getChainWithMostUSDC = (): number | null => {
+ if (!walletPortfolioData) return null;
+
+ // Use the same logic as HomeScreen to get stable currency balances per chain
+ // Wrap PortfolioData in the WalletPortfolioMobulaResponse structure expected by the utility
+ const stableBalance = getStableCurrencyBalanceOnEachChain({
+ result: { data: walletPortfolioData },
+ });
+ const maxStableBalance = Math.max(
+ ...Object.values(stableBalance).map((s) => s.balance)
+ );
+
+ // Find the chain ID with the highest stable currency balance
+ const chainIdOfMaxBalance = Number(
+ Object.keys(stableBalance).find(
+ (key) => stableBalance[Number(key)].balance === maxStableBalance
+ ) || null
+ );
+
+ return chainIdOfMaxBalance > 0 ? chainIdOfMaxBalance : null;
+ };
+
const handleSearchTypeChange = (index: number) => {
if (index === 0) setSearchType(SearchType.Trending);
else if (index === 1) setSearchType(SearchType.Fresh);
@@ -216,8 +374,61 @@ export default function Search({
const handleTokenSelect = (item: Asset | Token) => {
if (isBuy) {
+ let selectedChainId: number;
+ let selectedContract: string;
+ let selectedDecimals: number;
+
// Asset type
if ('chain' in item) {
+ // Check if this asset exists on multiple chains
+ const hasMultipleChains =
+ 'allChains' in item && item.allChains && item.allChains.length > 1;
+
+ if (
+ hasMultipleChains &&
+ 'allChains' in item &&
+ 'allContracts' in item &&
+ 'allDecimals' in item
+ ) {
+ // Multi-chain asset - select chain with most USDC
+ const chainWithMostUSDC = getChainWithMostUSDC();
+
+ if (
+ chainWithMostUSDC &&
+ item.allChains &&
+ item.allContracts &&
+ item.allDecimals
+ ) {
+ // Find the index of the chain with most USDC
+ const chainIndex = item.allChains.findIndex(
+ (chain: string) =>
+ chainNameToChainIdTokensData(chain) === chainWithMostUSDC
+ );
+
+ if (chainIndex !== -1) {
+ // Use the chain with most USDC
+ selectedChainId = chainWithMostUSDC;
+ selectedContract = item.allContracts[chainIndex];
+ selectedDecimals = item.allDecimals[chainIndex];
+ } else {
+ // Fallback to primary chain
+ selectedChainId = chainNameToChainIdTokensData(item.chain);
+ selectedContract = item.contract;
+ selectedDecimals = item.decimals;
+ }
+ } else {
+ // No USDC balance found, use primary chain
+ selectedChainId = chainNameToChainIdTokensData(item.chain);
+ selectedContract = item.contract;
+ selectedDecimals = item.decimals;
+ }
+ } else {
+ // Single chain asset
+ selectedChainId = chainNameToChainIdTokensData(item.chain);
+ selectedContract = item.contract;
+ selectedDecimals = item.decimals;
+ }
+
setBuyToken({
name: item.name,
symbol: item.symbol,
@@ -225,13 +436,18 @@ export default function Search({
usdValue: formatExponentialSmallNumber(
limitDigitsNumber(item.price || 0)
),
- dailyPriceChange: -0.02,
- chainId: chainNameToChainIdTokensData(item.chain),
- decimals: item.decimals,
- address: item.contract,
+ dailyPriceChange:
+ 'priceChange24h' in item ? item.priceChange24h || 0.0 : 0.0,
+ chainId: selectedChainId,
+ decimals: selectedDecimals,
+ address: selectedContract,
});
} else {
- // Token type
+ // Token type - use blockchain property
+ selectedChainId = chainNameToChainIdTokensData(item.blockchain);
+ selectedContract = item.contract;
+ selectedDecimals = item.decimals;
+
setBuyToken({
name: item.name,
symbol: item.symbol,
@@ -239,10 +455,10 @@ export default function Search({
usdValue: formatExponentialSmallNumber(
limitDigitsNumber(item.price || 0)
),
- dailyPriceChange: -0.02,
- chainId: chainNameToChainIdTokensData(item.blockchain),
- decimals: item.decimals,
- address: item.contract,
+ dailyPriceChange: 0.0,
+ chainId: selectedChainId,
+ decimals: selectedDecimals,
+ address: selectedContract,
});
}
} else {
@@ -253,7 +469,8 @@ export default function Search({
usdValue: formatExponentialSmallNumber(
limitDigitsNumber(item.price || 0)
),
- dailyPriceChange: -0.02,
+ dailyPriceChange:
+ 'priceChange24h' in item ? item.priceChange24h || 0.0 : 0.0,
decimals: item.decimals,
address: item.contract,
};
@@ -279,183 +496,357 @@ export default function Search({
removeQueryParams();
};
+ const handleMarketSelect = (market: Market) => {
+ // When selecting a market, set the buy token to token0 (the searched token)
+ // and automatically select the chain where this liquidity pool exists
+ setBuyToken({
+ name: market.token0.name,
+ symbol: market.token0.symbol,
+ logo: market.token0.logo ?? '',
+ usdValue: formatExponentialSmallNumber(
+ limitDigitsNumber(market.token0.price || 0)
+ ),
+ dailyPriceChange: market.priceChange24h || 0,
+ chainId: chainNameToChainIdTokensData(market.blockchain),
+ decimals: market.token0.decimals,
+ address: market.token0.address,
+ });
+ setSearchText('');
+ setSearching(false);
+ removeQueryParams();
+ };
+
+ const isMobile = useIsMobile();
+
return (
diff --git a/src/apps/pulse/components/Sell/Sell.tsx b/src/apps/pulse/components/Sell/Sell.tsx
index 10637c46..f2a5dfb3 100644
--- a/src/apps/pulse/components/Sell/Sell.tsx
+++ b/src/apps/pulse/components/Sell/Sell.tsx
@@ -156,7 +156,12 @@ const Sell = (props: SellProps) => {
// Find the asset in the portfolio
const assetData = walletPortfolioData.result.data.assets.find(
- (asset) => asset.asset.symbol === token.symbol
+ (asset) =>
+ asset.asset.symbol === token.symbol &&
+ asset.contracts_balances.some(
+ (contract) =>
+ contract.address.toLowerCase() === token.address.toLowerCase()
+ )
);
if (!assetData) return 0;
diff --git a/src/apps/pulse/utils/parseSearchData.ts b/src/apps/pulse/utils/parseSearchData.ts
index 5850c0e9..948d6393 100644
--- a/src/apps/pulse/utils/parseSearchData.ts
+++ b/src/apps/pulse/utils/parseSearchData.ts
@@ -1,5 +1,7 @@
/* eslint-disable no-restricted-syntax */
import {
+ Exchange,
+ MobulaToken,
PairResponse,
Projection,
TokenAssetResponse,
@@ -14,31 +16,8 @@ import {
import { parseNumberString } from './number';
import { isWrappedNativeToken } from '../../../utils/blockchain';
-// Optimism uses this special address for native ETH in Mobula API
-const OP_NATIVE_MOBULA = '0xdeaddeaddeaddeaddeaddeaddeaddeaddead0000';
-const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
-const OPTIMISM_CHAIN_ID = 10;
-
-/**
- * Normalize contract address for native tokens
- * Optimism native ETH uses a special address in Mobula, we need to convert it to zero address
- */
-const normalizeContractAddress = (
- contract: string,
- symbol: string,
- chainId: number
-): string => {
- if (
- contract.toLowerCase() === OP_NATIVE_MOBULA.toLowerCase() &&
- symbol === 'ETH' &&
- chainId === OPTIMISM_CHAIN_ID
- ) {
- return ZERO_ADDRESS;
- }
- return contract;
-};
-
export type Asset = {
+ id?: number; // Mobula ID for deduplication
name: string;
symbol: string;
logo: string | null;
@@ -51,6 +30,23 @@ export type Asset = {
contract: string;
priceChange24h: number | null;
timestamp?: number;
+ // For multi-chain assets, store all chains
+ allChains?: string[];
+ allContracts?: string[];
+ allDecimals?: number[];
+};
+
+export type Market = {
+ pairName: string; // e.g., "PLR/ETH"
+ token0: MobulaToken;
+ token1: MobulaToken;
+ liquidity: number;
+ volume24h: number;
+ blockchain: string;
+ address: string;
+ exchange: Exchange;
+ priceChange24h: number | null;
+ price: number | null;
};
export function parseAssetData(
@@ -59,6 +55,9 @@ export function parseAssetData(
): Asset[] {
const result: Asset[] = [];
const { blockchains, contracts, decimals } = asset;
+
+ // Filter valid chains first
+ const validChainIndices: number[] = [];
for (let i = 0; i < blockchains.length; i += 1) {
if (
MOBULA_CHAIN_NAMES.includes(blockchains[i]) &&
@@ -66,125 +65,449 @@ export function parseAssetData(
) {
const chainId = chainNameToChainIdTokensData(blockchains[i]);
const contractAddress = contracts[i];
- const normalizedContract = normalizeContractAddress(
- contractAddress,
- asset.symbol,
- chainId
- );
- // Filter out wrapped native tokens (WETH, WBNB, WPOL, etc.) from search results
+ // Filter out wrapped native tokens
if (!isWrappedNativeToken(contractAddress, chainId)) {
- result.push({
- name: asset.name,
- symbol: asset.symbol,
- logo: asset.logo,
- mCap: asset.market_cap,
- volume: asset.volume,
- price: asset.price,
- liquidity: asset.liquidity,
- chain: blockchains[i],
- decimals: decimals[i],
- contract: normalizedContract,
- priceChange24h: asset.price_change_24h,
- });
+ validChainIndices.push(i);
}
}
}
+ // If no valid chains, return empty
+ if (validChainIndices.length === 0) {
+ return result;
+ }
+
+ // Create a single asset entry with the first valid chain as primary
+ // and store all other chains in allChains
+ const primaryIndex = validChainIndices[0];
+
+ result.push({
+ id: asset.id, // Include Mobula ID
+ name: asset.name,
+ symbol: asset.symbol,
+ logo: asset.logo,
+ mCap: asset.market_cap,
+ volume: asset.volume,
+ price: asset.price,
+ liquidity: asset.liquidity,
+ chain: blockchains[primaryIndex],
+ decimals: decimals[primaryIndex],
+ contract: contracts[primaryIndex],
+ priceChange24h: asset.price_change_24h,
+ // Store all valid chains for multi-chain selection
+ allChains: validChainIndices.map((i) => blockchains[i]),
+ allContracts: validChainIndices.map((i) => contracts[i]),
+ allDecimals: validChainIndices.map((i) => decimals[i]),
+ });
+
return result;
}
export function parseTokenData(asset: TokenAssetResponse): Asset[] {
const result: Asset[] = [];
const { blockchains, decimals, contracts } = asset;
+
+ // Filter valid chains first
+ const validChainIndices: number[] = [];
for (let i = 0; i < blockchains.length; i += 1) {
if (MOBULA_CHAIN_NAMES.includes(blockchains[i])) {
const chainId = chainNameToChainIdTokensData(blockchains[i]);
const contractAddress = contracts[i];
- const normalizedContract = normalizeContractAddress(
- contractAddress,
- asset.symbol,
- chainId
- );
- // Filter out wrapped native tokens (WETH, WBNB, WPOL, etc.) from search results
+ // Filter out wrapped native tokens
if (!isWrappedNativeToken(contractAddress, chainId)) {
- result.push({
- name: asset.name,
- symbol: asset.symbol,
- logo: asset.logo,
- mCap: asset.market_cap,
- volume: asset.volume_24h,
- price: asset.price,
- liquidity: asset.liquidity,
- chain: blockchains[i],
- decimals: decimals[i],
- contract: normalizedContract,
- priceChange24h: asset.price_change_24h,
- });
+ validChainIndices.push(i);
}
}
}
+
+ // If no valid chains, return empty
+ if (validChainIndices.length === 0) {
+ return result;
+ }
+
+ // Create a single token entry with the first valid chain as primary
+ const primaryIndex = validChainIndices[0];
+
+ result.push({
+ id: asset.id, // Include Mobula ID
+ name: asset.name,
+ symbol: asset.symbol,
+ logo: asset.logo,
+ mCap: asset.market_cap,
+ volume: asset.volume_24h,
+ price: asset.price,
+ liquidity: asset.liquidity,
+ chain: blockchains[primaryIndex],
+ decimals: decimals[primaryIndex],
+ contract: contracts[primaryIndex],
+ priceChange24h: asset.price_change_24h,
+ // Store all valid chains for multi-chain selection
+ allChains: validChainIndices.map((i) => blockchains[i]),
+ allContracts: validChainIndices.map((i) => contracts[i]),
+ allDecimals: validChainIndices.map((i) => decimals[i]),
+ });
+
return result;
}
+/**
+ * Parse market pairs from TokenAssetResponse, ensuring the searched token appears first
+ */
+export function parseMarketPairs(
+ asset: TokenAssetResponse,
+ searchTerm: string,
+ chains: MobulaChainNames
+): Market[] {
+ const markets: Market[] = [];
+ const { pairs } = asset;
+
+ if (!pairs || pairs.length === 0) {
+ return markets;
+ }
+
+ const normalizedSearchTerm = searchTerm.toLowerCase().trim();
+
+ for (const pair of pairs) {
+ // Filter by chain if specified
+ if (chains === MobulaChainNames.All || pair.blockchain === chains) {
+ // Determine which token matches the search term
+ const token0MatchesSearch =
+ pair.token0.symbol.toLowerCase().includes(normalizedSearchTerm) ||
+ pair.token0.name.toLowerCase().includes(normalizedSearchTerm);
+
+ const token1MatchesSearch =
+ pair.token1.symbol.toLowerCase().includes(normalizedSearchTerm) ||
+ pair.token1.name.toLowerCase().includes(normalizedSearchTerm);
+
+ // Only process if at least one token matches
+ if (token0MatchesSearch || token1MatchesSearch) {
+ // Arrange pair so searched token is first
+ let pairName: string;
+ let orderedToken0: MobulaToken;
+ let orderedToken1: MobulaToken;
+
+ if (token0MatchesSearch) {
+ pairName = `${pair.token0.symbol}/${pair.token1.symbol}`;
+ orderedToken0 = pair.token0;
+ orderedToken1 = pair.token1;
+ } else {
+ // token1 matches, so swap the order
+ pairName = `${pair.token1.symbol}/${pair.token0.symbol}`;
+ orderedToken0 = pair.token1;
+ orderedToken1 = pair.token0;
+ }
+
+ markets.push({
+ pairName,
+ token0: orderedToken0,
+ token1: orderedToken1,
+ liquidity: pair.liquidity,
+ volume24h: pair.volume24h || 0,
+ blockchain: pair.blockchain,
+ address: pair.address,
+ exchange: pair.exchange,
+ priceChange24h: null, // Pair type doesn't include price_change_24h
+ price: pair.price,
+ });
+ }
+ }
+ }
+
+ return markets;
+}
+
+/**
+ * Parse market pairs from PairResponse
+ */
+export function parsePairResponse(pair: PairResponse): Market {
+ return {
+ pairName: `${pair.token0.symbol}/${pair.token1.symbol}`,
+ token0: pair.token0,
+ token1: pair.token1,
+ liquidity: pair.liquidity,
+ volume24h: pair.volume_24h || pair.volume24h,
+ blockchain: pair.blockchain,
+ address: pair.address,
+ exchange: pair.exchange,
+ priceChange24h: pair.price_change_24h || null,
+ price: pair.price,
+ };
+}
+
+/**
+ * Sort assets by relevance to search term, then by market cap
+ */
+export function sortAssets(assets: Asset[], searchTerm: string): Asset[] {
+ const normalizedSearchTerm = searchTerm.toLowerCase().trim();
+
+ return assets.sort((a, b) => {
+ // Exact symbol match comes first
+ const aExactMatch = a.symbol.toLowerCase() === normalizedSearchTerm;
+ const bExactMatch = b.symbol.toLowerCase() === normalizedSearchTerm;
+
+ if (aExactMatch && !bExactMatch) return -1;
+ if (!aExactMatch && bExactMatch) return 1;
+
+ // Then sort by market cap (highest first)
+ const aMCap = a.mCap || 0;
+ const bMCap = b.mCap || 0;
+ return bMCap - aMCap;
+ });
+}
+
+/**
+ * Sort markets by relevance to search term, then by liquidity
+ */
+export function sortMarkets(markets: Market[], searchTerm: string): Market[] {
+ const normalizedSearchTerm = searchTerm.toLowerCase().trim();
+
+ return markets.sort((a, b) => {
+ // Check if token0 (first in pair) is exact match to search term
+ const aToken0ExactMatch =
+ a.token0.symbol.toLowerCase() === normalizedSearchTerm;
+ const bToken0ExactMatch =
+ b.token0.symbol.toLowerCase() === normalizedSearchTerm;
+
+ // Prioritize pairs where searched token is token0 and exact match
+ if (aToken0ExactMatch && !bToken0ExactMatch) return -1;
+ if (!aToken0ExactMatch && bToken0ExactMatch) return 1;
+
+ // Then sort by liquidity (highest first)
+ return b.liquidity - a.liquidity;
+ });
+}
+
+/**
+ * Filter markets by minimum liquidity threshold
+ */
+export function filterMarketsByLiquidity(
+ markets: Market[],
+ minLiquidity: number
+): Market[] {
+ return markets.filter((market) => (market.liquidity || 0) >= minLiquidity);
+}
+
+function mergeMultiChainData(target: Asset, source: Asset) {
+ if (!source.allChains || !source.allContracts || !source.allDecimals) return;
+
+ if (!target.allChains || !target.allContracts || !target.allDecimals) {
+ // eslint-disable-next-line no-param-reassign
+ target.allChains = [...source.allChains];
+ // eslint-disable-next-line no-param-reassign
+ target.allContracts = [...source.allContracts];
+ // eslint-disable-next-line no-param-reassign
+ target.allDecimals = [...source.allDecimals];
+ return;
+ }
+
+ for (let i = 0; i < source.allChains.length; i += 1) {
+ const chain = source.allChains[i];
+ const existingIndex = target.allChains.indexOf(chain);
+ if (existingIndex === -1) {
+ target.allChains.push(chain);
+ target.allContracts.push(source.allContracts[i]);
+ target.allDecimals.push(source.allDecimals[i]);
+ }
+ }
+}
+
+/**
+ * Deduplicate assets by Mobula ID and symbol
+ * This handles cases where the API returns both 'asset' and 'token' types for the same asset
+ */
+function deduplicateAssetsBySymbol(assets: Asset[]): Asset[] {
+ const assetMap = new Map
- 
+const ChainOverlay = React.forwardRef(
+ (
+ { setShowChainOverlay, setChains, setOverlayStyle, overlayStyle, chains },
+ ref
+ ) => {
+ return (
+ <>
+
-
- );
-}
+
+ );
+ }
+);
+
+ChainOverlay.displayName = 'ChainOverlay';
+
+export default ChainOverlay;
diff --git a/src/apps/pulse/components/Search/MarketList.tsx b/src/apps/pulse/components/Search/MarketList.tsx
new file mode 100644
index 00000000..2bf50c98
--- /dev/null
+++ b/src/apps/pulse/components/Search/MarketList.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { chainNameToChainIdTokensData } from '../../../../services/tokensData';
+import { getLogoForChainId } from '../../../../utils/blockchain';
+import RandomAvatar from '../../../pillarx-app/components/RandomAvatar/RandomAvatar';
+import { formatBigNumber } from '../../utils/number';
+import { Market } from '../../utils/parseSearchData';
+import TokenPriceChange from '../Price/TokenPriceChange';
+
+export interface MarketListProps {
+ markets: Market[];
+ handleMarketSelect: (market: Market) => void;
+}
+
+export default function MarketList({
+ markets,
+ handleMarketSelect,
+}: MarketListProps) {
+ if (!markets || markets.length === 0) {
+ return null;
+ }
+
+ return (
+ <>
+ {markets.map((market) => {
+ const chainId = chainNameToChainIdTokensData(market.blockchain);
+
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/src/apps/pulse/components/Search/Search.tsx b/src/apps/pulse/components/Search/Search.tsx
index 9ba72df1..6baa733d 100644
--- a/src/apps/pulse/components/Search/Search.tsx
+++ b/src/apps/pulse/components/Search/Search.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
import React, {
Dispatch,
SetStateAction,
@@ -6,36 +5,54 @@ import React, {
useRef,
useState,
} from 'react';
-import { TailSpin } from 'react-loader-spinner';
import { useLocation, useNavigate } from 'react-router-dom';
import { isAddress } from 'viem';
-import {
- Token,
- chainNameToChainIdTokensData,
-} from '../../../../services/tokensData';
+
+// types
import { PortfolioData } from '../../../../types/api';
+import { SearchType, SelectedToken, SortType } from '../../types/tokens';
+
+// utils
import { isTestnet } from '../../../../utils/blockchain';
import {
formatExponentialSmallNumber,
limitDigitsNumber,
} from '../../../../utils/number';
-import SearchIcon from '../../assets/seach-icon.svg';
-import { useTokenSearch } from '../../hooks/useTokenSearch';
-import { SearchType, SelectedToken } from '../../types/tokens';
+import { useIsMobile } from '../../../../utils/media';
import { MobulaChainNames, getChainId } from '../../utils/constants';
import {
Asset,
+ filterMarketsByLiquidity,
+ Market,
parseFreshAndTrendingTokens,
parseSearchData,
} from '../../utils/parseSearchData';
-import Close from '../Misc/Close';
-import Esc from '../Misc/Esc';
+import { getStableCurrencyBalanceOnEachChain } from '../../utils/utils';
+
+// services
+import {
+ Token,
+ chainNameToChainIdTokensData,
+} from '../../../../services/tokensData';
+
+// hooks
+import { useTokenSearch } from '../../hooks/useTokenSearch';
+
+// components
import Refresh from '../Misc/Refresh';
import ChainOverlay from './ChainOverlay';
import ChainSelectButton from './ChainSelect';
+import MarketList from './MarketList';
import PortfolioTokenList from './PortfolioTokenList';
+import SearchSkeleton from './SearchSkeleton';
+import Sort from './Sort';
import TokenList from './TokenList';
+// assets
+import SearchIcon from '../../assets/seach-icon.svg';
+import ClearSearchIcon from '../../assets/clear-search-icon.svg';
+import BackArrowIcon from '../../assets/back-arrow-icon.svg';
+
interface SearchProps {
setSearching: Dispatch {
+ setShowChainOverlay(false);
+ setOverlayStyle({});
+ }}
+ />
+
- e.stopPropagation()}
+ >
+
+ {Object.values(MobulaChainNames)
+ .filter(
+ (chain) => isGnosisEnabled || chain !== MobulaChainNames.XDAI
+ ) // Remove XDAI if Gnosis is not enabled
+ .sort((a, b) => {
+ // Put "All" first, then alphabetical
+ if (a === MobulaChainNames.All) return -1;
+ if (b === MobulaChainNames.All) return 1;
+ return a.localeCompare(b);
+ })
+ .map((chain) => {
+ const isSelected = chains === chain;
+ const isAll = chain === MobulaChainNames.All;
+ let logo = null;
+ if (isAll) {
+ logo = (
+
+
+
+ );
+ } else {
+ const chainId = chainNameToChainIdTokensData(chain);
+ logo = (
+
+ );
+ }
+ return (
+
- );
- })}
+ );
+ })}
+ {
+ setChains(chain);
+ setShowChainOverlay(false);
+ setOverlayStyle({});
+ }}
+ className={`flex items-center gap-2 px-2.5 py-2.5 cursor-pointer relative text-base ${
+ isSelected
+ ? 'bg-[#29292F] text-white font-medium'
+ : 'bg-transparent text-[#b0b0b0] font-normal'
+ }`}
+ >
+ {logo}
+
+ {chain === MobulaChainNames.All ? 'All chains' : chain}
+
+ {isSelected && (
+
- )}
-
+
+
+ )}
-
-
+
{showChainOverlay && (
-
- 
-
- {
- setSearchText(e.target.value);
- // Only clear search type if on buy screen AND not on My Holdings
- if (isBuy && searchType !== SearchType.MyHoldings) {
- setSearchType(undefined);
- }
- setParsedAssets(undefined);
- }}
- />
- {(searchText.length > 0 && isFetching) || isLoading ? (
-
- {/* Trending, Fresh, TopGainers, MyHoldings */}
-
-
- ) : (
-
+ {/* Header: Back/Search bar, Refresh, Chain selector */}
+
+
+ {/* Filter tabs - Trending / Fresh / Top Gainers / My Holdings */}
+ {!searchText && (
+ {/* Back button (mobile only) */}
+ {isMobile && (
+
)}
-
-
+
+ {/* Search input */}
- {isBuy ? (
+
+ {/* Refresh button */}
-
- {
- const rect = chainButtonRef?.current?.getBoundingClientRect();
- setShowChainOverlay(true);
- setOverlayStyle({
- ...overlayStyling,
- position: 'absolute',
- top: rect?.top ? rect.top + 44 : undefined,
- left: rect?.left ? rect.left : undefined,
- });
- }}
- data-testid="pulse-search-chain-selector"
+ className="flex items-center justify-center w-10 h-10 bg-[#121116] rounded-[10px] flex-shrink-0 group p-0.5"
+ data-testid="pulse-search-refresh-button"
>
-
- ) : (
+
+ {/* Chain selector (only for buy) */}
+ {isBuy ? (
+
+
{
+ const rect = chainButtonRef?.current?.getBoundingClientRect();
+ if (rect) {
+ setShowChainOverlay(true);
+ setOverlayStyle({
+ ...overlayStyling,
+ top: `${rect.bottom + 5}px`,
+ left: `${rect.right - 200}px`,
+ });
+ }
+ }}
+ className="flex items-center justify-center w-10 h-10 bg-[#121116] rounded-[10px] flex-shrink-0 group p-0.5 cursor-pointer"
+ role="button"
+ tabIndex={0}
+ aria-label="Select blockchain"
+ data-testid="pulse-search-chain-selector"
+ >
+
+ ) : (
+
+ )}
+
+
+
-
)}
-
+ {(isBuy
+ ? [
+ '🔥 Trending',
+ '🌱 Fresh',
+ '🚀 Top Gainers',
+ '💰 My Holdings',
+ ]
+ : ['My Holdings']
+ ).map((item, index) => {
+ // For sell screen, always map to MyHoldings index (3)
+ const actualIndex = isBuy ? index : 3;
+
+ if (!isBuy) {
+ return (
+
+
+ );
+ }
+
+ const isActive = searchType && item.includes(searchType);
+
+ return (
+
+ );
+ })}
+ {item} +
+
- {(isBuy
- ? ['🔥 Trending', '🌱 Fresh', '🚀 Top Gainers', '💰My Holdings']
- : ['My Holdings']
- ).map((item, index) => {
- // For sell screen, always map to MyHoldings index (3)
- const actualIndex = isBuy ? index : 3;
-
- if (!isBuy) {
- return (
-
-
- );
- }
+ {/* Scrollable results section */}
+ - {item} -
-
+ {/* Show skeleton during loading */}
+ {(isFetching || isLoading) &&
- {!searchText &&
- parsedAssets === undefined &&
- searchType !== SearchType.MyHoldings && (
+ {/* Show error message if loading failed */}
+ {isError && !isLoading && (
-
-
- );
- })}
-
-
)}
- {/* Show search results only when NOT on My Holdings */}
- {searchText && list?.assets && searchType !== SearchType.MyHoldings && (
- - Search by token or paste address... -
+
+
⚠️ Loading Failed
++ Unable to load results. Please try again. +
+
-
- )}
- {parsedAssets && searchType !== SearchType.MyHoldings && (
-
-
- )}
-
- {/* Show My Holdings portfolio data (filtered by search if applicable) */}
- {searchType === SearchType.MyHoldings && (
-
-
- )}
+ {!searchText &&
+ parsedAssets === undefined &&
+ searchType !== SearchType.MyHoldings &&
+ !isError && (
+
+
+ )}
+
+ {/* Show search results with grouped Assets and Markets sections */}
+ {searchText &&
+ sortedSearchAssets &&
+ searchType !== SearchType.MyHoldings &&
+ !isFetching && (
+ + Search by token or paste address... +
+
+ {/* Assets Section */}
+ {sortedSearchAssets.length > 0 && (
+ <>
+ {/* Column Headers with Sorting */}
+
+ )}
+
+ {/* Show Trending/Fresh/Top Gainers results - ONLY when NO search text */}
+ {!searchText &&
+ parsedAssets &&
+ searchType !== SearchType.MyHoldings &&
+ !isLoading && (
+
+
+
+
+
+
+
+
+ /
+
+
+
+
+
+
+
+
+ /
+
+
+
+
+
+ + Assets ({sortedSearchAssets.length}) +
+
+
+ + Markets ({filteredMarkets.length}) +
+
+
+ )}
+
+ {/* Show My Holdings portfolio data (filtered by search if applicable) */}
+ {searchType === SearchType.MyHoldings && (
+
+
+ )}
+
+ {/* Section Headers */}
+ {showSections && (
+ <>
+
+
+
+ )}
+
+ {/* Skeleton Rows */}
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ );
+}
diff --git a/src/apps/pulse/components/Search/TokenList.tsx b/src/apps/pulse/components/Search/TokenList.tsx
index 4d018e0d..fcbad10d 100644
--- a/src/apps/pulse/components/Search/TokenList.tsx
+++ b/src/apps/pulse/components/Search/TokenList.tsx
@@ -14,10 +14,11 @@ export interface TokenListProps {
assets: Asset[];
handleTokenSelect: (item: Asset) => void;
searchType?: SearchType;
+ hideHeaders?: boolean;
}
export default function TokenList(props: TokenListProps) {
- const { assets, handleTokenSelect, searchType } = props;
+ const { assets, handleTokenSelect, searchType, hideHeaders } = props;
const [sort, setSort] = useState<{
mCap?: SortType;
@@ -56,72 +57,66 @@ export default function TokenList(props: TokenListProps) {
if (assets) {
return (
<>
- {(searchType === SearchType.Trending ||
- searchType === SearchType.Fresh) && (
-
+ {/* Left side: Avatar + Text */}
+
+ ))}
+
+ {/* Avatar */}
+
+
+ {/* Text lines */}
+
+
+ {/* Right side: Value bars */}
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- /
-
-
-
-
-
- 
-
-
-
)}
-
+
- )}
+ )}
{assets.map((item) => {
return (
+
+
-
+
+ /
+
+
+
/
-
-
-
-
+
+
+
+ /
+
+
+
-
-
+ {item.symbol}
-+ alt="chain logo" + /> + )} +
+
-
-
+
- + {item.symbol} +
+{item.name}
+
-
{searchType === SearchType.Fresh && (
-
+
{formatElapsedTime(item.timestamp)}
)} -- MCap: -
-- {formatBigNumber(item.mCap || 0)} -
-- Vol: +
+ MCap:{' '} + + ${formatBigNumber(item.mCap || 0)} +
-- {formatBigNumber(item.volume || 0)} +
+ Vol:{' '} + + ${formatBigNumber(item.volume || 0)} +
+
-
-
-
-
-
+
diff --git a/src/apps/pulse/components/Search/tests/Search.test.tsx b/src/apps/pulse/components/Search/tests/Search.test.tsx
index 0899136c..3d530550 100644
--- a/src/apps/pulse/components/Search/tests/Search.test.tsx
+++ b/src/apps/pulse/components/Search/tests/Search.test.tsx
@@ -135,7 +135,7 @@ describe('
-
-
-
-
-
-
-
-
-
-
+
-
+
+
-
+
+
+
+
-
- Search by token or paste address... -
++ Search by token or paste address... +
+