Skip to content

fix(pulse): token selector responsiveness and daily price change data #487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aldin4u merged 1 commit into from
Jan 20, 2026
Merged

fix(pulse): token selector responsiveness and daily price change data #487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 56 additions & 56 deletions src/apps/pulse/components/Buy/Buy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,17 +200,17 @@ export default function Buy(props: BuyProps) {
} = useTokenPnL(
token && accountAddress && portfolioToken
? {
token: {
contract: token.address || '',
symbol: token.symbol,
decimals: token.decimals || 18,
balance: portfolioToken.balance || 0,
price: portfolioToken.price || 0,
},
transactionsData,
walletAddress: accountAddress,
chainId: token.chainId,
}
token: {
contract: token.address || '',
symbol: token.symbol,
decimals: token.decimals || 18,
balance: portfolioToken.balance || 0,
price: portfolioToken.price || 0,
},
transactionsData,
walletAddress: accountAddress,
chainId: token.chainId,
}
: null
);

Expand Down Expand Up @@ -245,7 +245,7 @@ export default function Buy(props: BuyProps) {
const nativeToken = portfolioTokens.find(
(t) =>
Number(getChainId(t.blockchain as MobulaChainNames)) ===
maxStableCoinBalance.chainId && isNativeToken(t.contract)
maxStableCoinBalance.chainId && isNativeToken(t.contract)
);

if (!nativeToken) {
Expand Down Expand Up @@ -598,7 +598,7 @@ export default function Buy(props: BuyProps) {
? foundToken.decimals[0] || 18
: foundToken.decimals || 18,
usdValue: foundToken.price?.toString() || '0',
dailyPriceChange: 0,
dailyPriceChange: foundToken.price_change_24h || 0,
};

setBuyToken(tokenToSelect as SelectedToken);
Expand Down Expand Up @@ -642,11 +642,11 @@ export default function Buy(props: BuyProps) {
>
{token ? (
<div
className="relative w-[113px] h-[36px] bg-[#1E1D24] rounded-[6px] shrink-0"
className="flex items-center gap-2.5 p-1.5 bg-[#1E1D24] rounded-[6px] min-w-[120px] max-w-full"
data-testid={`pulse-buy-token-selected-${token.chainId}-${token.name}`}
>
{/* Logo */}
<div className="absolute left-[6px] top-[6px] w-[24px] h-[24px]">
<div className="relative w-6 h-6 flex-shrink-0">
{token.logo ? (
<img
src={token.logo}
Expand All @@ -668,51 +668,52 @@ export default function Buy(props: BuyProps) {
/>
</div>

{/* Top Row: Symbol and Name */}
<div className="absolute left-[36px] top-[6px] flex items-center gap-[4px] max-w-[90px]">
<p className="font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white truncate shrink-0 max-w-[50px]">
{token.symbol}
</p>
<p className="font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white opacity-30 truncate block">
{token.name}
</p>
</div>
{/* Text Container */}
<div className="flex flex-col items-start min-w-0 flex-1">
{/* Top Row: Symbol and Name */}
<div className="flex items-center gap-1 w-full overflow-hidden">
<p className="font-normal text-[12px] leading-tight tracking-[-0.02em] text-white truncate max-w-[60px]">
{token.symbol}
</p>
<p className="font-normal text-[12px] leading-tight tracking-[-0.02em] text-white opacity-30 truncate">
{token.name}
</p>
</div>

{/* Bottom Row: Price and Change */}
<div className="flex items-center gap-1.5 w-full">
<p className="font-normal text-[10px] leading-tight tracking-[-0.02em] text-white opacity-50 whitespace-nowrap">
${token.usdValue}
</p>

{/* Bottom Row: Price and Change */}
<div className="absolute left-[36px] top-[20px] flex items-center gap-[6px]">
<p className="font-normal text-[10px] leading-[10px] tracking-[-0.02em] text-white opacity-50">
${token.usdValue}
</p>

<div className="flex items-center gap-[2px]">
{/* Triangle Indicator */}
{token.dailyPriceChange !== 0 && (
<div
className={`w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent ${
token.dailyPriceChange >= 0
? 'border-b-[6px] border-b-[#5CFF93]'
: 'border-t-[6px] border-t-[#FF366C]'
} opacity-50`}
/>
)}

<p
className={`font-normal text-[10px] leading-[10px] tracking-[-0.02em] opacity-50 ${
token.dailyPriceChange >= 0
<div className="flex items-center gap-0.5 min-w-0">
{/* Triangle Indicator */}
{token.dailyPriceChange !== 0 && (
<div
className={`w-0 h-0 border-l-[3px] border-l-transparent border-r-[3px] border-r-transparent ${token.dailyPriceChange >= 0
? 'border-b-[4px] border-b-[#5CFF93]'
: 'border-t-[4px] border-t-[#FF366C]'
} opacity-50`}
/>
)}

<p
className={`font-normal text-[10px] leading-tight tracking-[-0.02em] opacity-50 truncate ${token.dailyPriceChange >= 0
? 'text-[#5CFF93]'
: 'text-[#FF366C]'
}`}
>
{Math.abs(token.dailyPriceChange).toFixed(2)}%
</p>
}`}
>
{Math.abs(token.dailyPriceChange).toFixed(2)}%
</p>
</div>
</div>
</div>

{/* Chevron */}
<div className="absolute right-[12px] top-[15px]">
<div className="flex-shrink-0 px-0.5">
<img
src={ArrowDown}
className="w-[12px] h-[6px] opacity-50"
className="w-3 h-1.5 opacity-50"
alt="arrow-down"
/>
</div>
Expand Down Expand Up @@ -852,11 +853,10 @@ export default function Buy(props: BuyProps) {
className="flex bg-black ml-2.5 mr-2.5 w-[75px] h-[30px] rounded-[10px] p-0.5 pb-1 pt-0.5"
>
<button
className={`flex-1 items-center justify-center rounded-[10px] ${
isDisabled
? 'bg-[#1E1D24] text-grey cursor-not-allowed'
: 'bg-[#121116] text-white cursor-pointer'
}`}
className={`flex-1 items-center justify-center rounded-[10px] ${isDisabled
? 'bg-[#1E1D24] text-grey cursor-not-allowed'
: 'bg-[#121116] text-white cursor-pointer'
}`}
onClick={() => {
if (!isDisabled) {
if (isMax) {
Expand Down
32 changes: 15 additions & 17 deletions src/apps/pulse/components/Search/Search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -466,7 +466,7 @@ export default function Search({
limitDigitsNumber(item.price || 0)
),
dailyPriceChange:
'price_change_24h' in item ? item.price_change_24h || 0.0 : 0.0,
(item as any).price_change_24h || (item as any).priceChange24h || 0,
chainId: selectedChainId,
decimals: selectedDecimals,
address: selectedContract,
Expand All @@ -481,7 +481,7 @@ export default function Search({
limitDigitsNumber(item.price || 0)
),
dailyPriceChange:
'priceChange24h' in item ? item.priceChange24h || 0.0 : 0.0,
(item as any).priceChange24h || (item as any).price_change_24h || 0,
decimals: item.decimals,
address: item.contract,
};
Expand Down Expand Up @@ -536,11 +536,10 @@ export default function Search({
>
<div
ref={searchModalRef}
className={`flex flex-col bg-[#1E1D24] p-3 ${
isMobile
? 'fixed inset-0 z-50 w-full h-full'
: 'w-[446px] h-[512px] border border-white/[0.05] rounded-2xl shadow-[0px_2px_15px_0px_rgba(18,17,22,0.5)]'
}`}
className={`flex flex-col bg-[#1E1D24] p-3 ${isMobile
? 'fixed inset-0 z-50 w-full h-full'
: 'w-[446px] h-[512px] border border-white/[0.05] rounded-2xl shadow-[0px_2px_15px_0px_rgba(18,17,22,0.5)]'
}`}
data-testid="pulse-search-modal"
>
<div className="flex-shrink-0">
Expand Down Expand Up @@ -656,11 +655,11 @@ export default function Search({
>
{(isBuy
? [
'🔥 Trending',
'🌱 Fresh',
'🚀 Top Gainers',
'💰 My Holdings',
]
'🔥 Trending',
'🌱 Fresh',
'🚀 Top Gainers',
'💰 My Holdings',
]
: ['My Holdings']
).map((item, index) => {
// For sell screen, always map to MyHoldings index (3)
Expand Down Expand Up @@ -704,11 +703,10 @@ export default function Search({
}}
>
<div
className={`w-full h-full rounded-md py-1.5 px-2 flex items-center justify-center ${
isActive
? 'bg-[#2E2A4A] text-white'
: 'bg-[#1E1D24] text-white/60 group-hover:bg-[#2A2A2A]'
}`}
className={`w-full h-full rounded-md py-1.5 px-2 flex items-center justify-center ${isActive
? 'bg-[#2E2A4A] text-white'
: 'bg-[#1E1D24] text-white/60 group-hover:bg-[#2A2A2A]'
}`}
>
{item}
</div>
Expand Down
Loading
Loading