From 9237fb4b461645c655d7935d82922aaa27487de9 Mon Sep 17 00:00:00 2001
From: aldin4u <aldin@etherspot.io>
Date: Tue, 23 Dec 2025 09:53:44 +0000
Subject: [PATCH] fix(pulse): token selector responsiveness and daily price
 change data

- Refactored token selector in Buy and Sell components to use a flexible flexbox layout, resolving text overlap and width issues.
- Fixed dailyPriceChange data mapping in Search.tsx to correctly handle both 'price_change_24h' and 'priceChange24h' properties.
- Updated Buy.tsx to include price change data when pre-selecting tokens from URL.
---
 src/apps/pulse/components/Buy/Buy.tsx       | 112 +++++++++---------
 src/apps/pulse/components/Search/Search.tsx |  32 +++--
 src/apps/pulse/components/Sell/Sell.tsx     | 125 ++++++++++----------
 3 files changed, 133 insertions(+), 136 deletions(-)

diff --git a/src/apps/pulse/components/Buy/Buy.tsx b/src/apps/pulse/components/Buy/Buy.tsx
index 9e56be2c..0e800a8c 100644
--- a/src/apps/pulse/components/Buy/Buy.tsx
+++ b/src/apps/pulse/components/Buy/Buy.tsx
@@ -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
   );
 
@@ -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) {
@@ -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);
@@ -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}
@@ -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>
@@ -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) {
diff --git a/src/apps/pulse/components/Search/Search.tsx b/src/apps/pulse/components/Search/Search.tsx
index 3d1aab76..2efb2273 100644
--- a/src/apps/pulse/components/Search/Search.tsx
+++ b/src/apps/pulse/components/Search/Search.tsx
@@ -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,
@@ -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,
       };
@@ -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">
@@ -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)
@@ -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>
diff --git a/src/apps/pulse/components/Sell/Sell.tsx b/src/apps/pulse/components/Sell/Sell.tsx
index fca1ad37..7e530bf7 100644
--- a/src/apps/pulse/components/Sell/Sell.tsx
+++ b/src/apps/pulse/components/Sell/Sell.tsx
@@ -100,17 +100,17 @@ const Sell = (props: SellProps) => {
   const { pnl, isLoading: isPnLLoading } = 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
   );
 
@@ -301,11 +301,11 @@ const Sell = (props: SellProps) => {
           >
             {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-sell-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}
@@ -327,60 +327,61 @@ const Sell = (props: SellProps) => {
                   />
                 </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]"
-                    data-testid="pulse-sell-token-selector-symbol"
-                  >
-                    {token.symbol}
-                  </p>
-                  <p
-                    className="font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white opacity-30 truncate block"
-                    data-testid="pulse-sell-token-selector-name"
-                  >
-                    {token.name}
-                  </p>
-                </div>
-
-                {/* 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"
-                    data-testid="pulse-sell-token-selector-price"
-                  >
-                    ${formatExponentialSmallNumber(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`}
-                      />
-                    )}
+                {/* 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]"
+                      data-testid="pulse-sell-token-selector-symbol"
+                    >
+                      {token.symbol}
+                    </p>
+                    <p
+                      className="font-normal text-[12px] leading-tight tracking-[-0.02em] text-white opacity-30 truncate"
+                      data-testid="pulse-sell-token-selector-name"
+                    >
+                      {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-[10px] tracking-[-0.02em] opacity-50 ${
-                        token.dailyPriceChange >= 0
-                          ? 'text-[#5CFF93]'
-                          : 'text-[#FF366C]'
-                      }`}
+                      className="font-normal text-[10px] leading-tight tracking-[-0.02em] text-white opacity-50 whitespace-nowrap"
+                      data-testid="pulse-sell-token-selector-price"
                     >
-                      {Math.abs(token.dailyPriceChange).toFixed(2)}%
+                      ${formatExponentialSmallNumber(token.usdValue)}
                     </p>
+
+                    <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>
+                    </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>
@@ -465,11 +466,10 @@ const Sell = (props: SellProps) => {
                 </>
               ) : (
                 <input
-                  className={`no-spinner flex mobile:text-4xl xs:text-4xl desktop:text-4xl tablet:text-4xl font-medium text-right ${
-                    token
+                  className={`no-spinner flex mobile:text-4xl xs:text-4xl desktop:text-4xl tablet:text-4xl font-medium text-right ${token
                       ? 'flex-1 desktop:w-40 tablet:w-40 mobile:w-32 xs:w-full'
                       : 'flex-1 desktop:w-60 tablet:w-60 mobile:w-56 xs:w-full'
-                  }`}
+                    }`}
                   placeholder={inputPlaceholder}
                   onChange={handleTokenAmountChange}
                   value={tokenAmount}
@@ -564,11 +564,10 @@ const Sell = (props: SellProps) => {
               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
+                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) {
                     setShowNumInP(true);