Skip to content

Feature/pulse token selector fix #482

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
vignesha22 merged 14 commits into from
Dec 19, 2025
Merged

Feature/pulse token selector fix #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1669579
fix: truncate pulse token selector symbol and add price change
aldin4u Dec 16, 2025
9d6a020
Merge remote-tracking branch 'origin/staging' into feature/pulse-toke…
aldin4u Dec 16, 2025
8e83651
feat: Refine Pulse Token Selector UI & Fix 'My Holdings' Price Change
aldin4u Dec 16, 2025
23bfa28
chore: update remaining snapshots
aldin4u Dec 17, 2025
0c85f4c
fix(pulse): add missing relative class to token selector placeholder …
aldin4u Dec 18, 2025
141bc11
style(pulse): refine token selector width and layout to match mobile …
aldin4u Dec 18, 2025
91056be
style(pulse): restore 157px width and labels, keep positional fixes a…
aldin4u Dec 18, 2025
5a0c458
style(pulse): refine token selector to exact figma specs (113px, popp…
aldin4u Dec 18, 2025
77aca73
fix(build): remove accidentally added embedded repository hypercopy-r…
aldin4u Dec 18, 2025
b616ad0
fix: resolve hook violation in PnLDetailModal and remove problematic …
aldin4u Dec 18, 2025
e984f12
chore: remove unused snapshot file for CardSwap
aldin4u Dec 18, 2025
c382ba9
fix(lint): remove unused renderer import and fix formatting in CardSw…
aldin4u Dec 18, 2025
9ce4307
changes as per feedback
vignesha22 Dec 18, 2025
3dd6f77
changes as per feedback
vignesha22 Dec 18, 2025
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
171 changes: 84 additions & 87 deletions src/apps/insights/components/PnLDetailModal.tsx
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions src/apps/pulse/components/App/tests/__snapshots__/AppWrapper.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,19 +136,19 @@ exports[`<AppWrapper /> > renders correctly and matches snapshot 1`] = `
type="button"
>
<div
className="flex items-center justify-center max-w-[150px] w-32 h-9 bg-[#1E1D24] rounded-[10px]"
className="relative w-[113px] h-[36px] bg-[#1E1D24] rounded-[6px]"
>
<div
className="flex ml-1.5 font-normal desktop:text-sm tablet:text-sm mobile:text-xs xs:text-xs justify-items-end"
className="absolute left-[12px] top-[12px] font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white"
>
Select token
</div>
<div
className="flex ml-1.5"
className="absolute right-[12px] top-[15px]"
>
<img
alt="arrow-down"
className="w-2 h-1"
className="w-[12px] h-[6px] opacity-50"
src="data:image/svg+xml,%3csvg%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.5'%20d='M1%201L4.64645%204.64645C4.84171%204.84171%205.15829%204.84171%205.35355%204.64645L9%201'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e"
/>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/apps/pulse/components/App/tests/__snapshots__/HomeScreen.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,19 +136,19 @@ exports[`<HomeScreen /> > renders correctly and matches snapshot 1`] = `
type="button"
>
<div
className="flex items-center justify-center max-w-[150px] w-32 h-9 bg-[#1E1D24] rounded-[10px]"
className="relative w-[113px] h-[36px] bg-[#1E1D24] rounded-[6px]"
>
<div
className="flex ml-1.5 font-normal desktop:text-sm tablet:text-sm mobile:text-xs xs:text-xs justify-items-end"
className="absolute left-[12px] top-[12px] font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white"
>
Select token
</div>
<div
className="flex ml-1.5"
className="absolute right-[12px] top-[15px]"
>
<img
alt="arrow-down"
className="w-2 h-1"
className="w-[12px] h-[6px] opacity-50"
src="data:image/svg+xml,%3csvg%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.5'%20d='M1%201L4.64645%204.64645C4.84171%204.84171%205.15829%204.84171%205.35355%204.64645L9%201'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e"
/>
</div>
Expand Down
101 changes: 65 additions & 36 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 @@ -642,74 +642,103 @@ export default function Buy(props: BuyProps) {
>
{token ? (
<div
className="flex items-center mobile:w-32 xs:w-32 desktop:w-36 h-9 bg-[#1E1D24] rounded-md"
className="relative w-[113px] h-[36px] bg-[#1E1D24] rounded-[6px] shrink-0"
data-testid={`pulse-buy-token-selected-${token.chainId}-${token.name}`}
>
<div className="relative inline-block">
{/* Logo */}
<div className="absolute left-[6px] top-[6px] w-[24px] h-[24px]">
{token.logo ? (
<img
src={token.logo}
alt="Main"
className="w-6 h-6 ml-1 mr-1 rounded-full"
className="w-full h-full rounded-full"
/>
) : (
<div className="w-6 h-6 ml-1 mr-1 overflow-hidden rounded-full">
<div className="w-full h-full overflow-hidden rounded-full">
<RandomAvatar name={token.name || ''} />
<span className="absolute inset-0 flex items-center justify-center text-white text-lg">
<span className="absolute inset-0 flex items-center justify-center text-white text-[10px]">
{token.name?.slice(0, 2)}
</span>
</div>
)}
<img
src={getLogoForChainId(token.chainId)}
className="w-2.5 h-2.5 absolute bottom-[-2px] right-[2px] rounded-full"
className="w-2.5 h-2.5 absolute -bottom-0.5 -right-0.5 rounded-full ring-1 ring-[#1E1D24]"
alt="Chain Logo"
/>
</div>
<div className="flex flex-col mt-2.5 h-10 w-[91px]">
<div className="flex">
<p className="font-normal desktop:text-sm mobile:text-xs xs:text-xs">
{token.symbol}
</p>
{token.symbol.length + token.name.length <= 13 && (
<p className="ml-1 opacity-30 font-normal desktop:text-sm mobile:text-xs xs:text-xs text-white">
{token.name}
</p>

{/* 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>

{/* 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}
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Inconsistent USD value formatting compared to Sell component.

Line 684 displays token.usdValue directly without formatting, but the Sell component (line 352) uses formatExponentialSmallNumber(token.usdValue). This inconsistency could cause display issues for very small values (e.g., tokens priced at 1e-8) where:

  • Buy would show: "1e-8"
  • Sell would show: "0.00000001"
🔎 Apply this diff to match Sell component formatting: 
-                  <p className="font-normal text-[10px] leading-[10px] tracking-[-0.02em] text-white opacity-50">
-                    ${token.usdValue}
+                  <p className="font-normal text-[10px] leading-[10px] tracking-[-0.02em] text-white opacity-50">
+                    ${formatExponentialSmallNumber(token.usdValue)}
                   </p>

Note: formatExponentialSmallNumber is already imported at line 18.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
${token.usdValue}
<p className="font-normal text-[10px] leading-[10px] tracking-[-0.02em] text-white opacity-50">
${formatExponentialSmallNumber(token.usdValue)}
</p>
🤖 Prompt for AI Agents 
In src/apps/pulse/components/Buy/Buy.tsx around line 684, the USD value is
rendered directly as token.usdValue which is inconsistent with the Sell
component; replace the direct usage with the shared formatter by calling
formatExponentialSmallNumber(token.usdValue) so very small values render like
the Sell component; formatExponentialSmallNumber is already imported at the top
so just swap the displayed expression to use that function.

Copy link
Collaborator

@RanaBug RanaBug Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vignesha22 Just this to review otherwise approved

Copy link
Contributor

@coderabbitai coderabbitai bot Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

Copy link
Contributor

@vignesha22 vignesha22 Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Has spoken to Aldin and he says exponential value is fine so merging it now

</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`}
/>
)}
</div>
<div className="flex">
<p className="opacity-50 font-normal text-white h-[10px] text-[10px]">
${token.usdValue}

<p
className={`font-normal text-[10px] leading-[10px] tracking-[-0.02em] opacity-50 ${
token.dailyPriceChange >= 0
? 'text-[#5CFF93]'
: 'text-[#FF366C]'
}`}
>
{Math.abs(token.dailyPriceChange).toFixed(2)}%
</p>
</div>
</div>
<div className="flex m-1.5">
<img src={ArrowDown} className="w-2 h-1" alt="arrow-down" />

{/* Chevron */}
<div className="absolute right-[12px] top-[15px]">
<img
src={ArrowDown}
className="w-[12px] h-[6px] opacity-50"
alt="arrow-down"
/>
</div>
</div>
) : (
<div className="flex items-center justify-center max-w-[150px] w-32 h-9 bg-[#1E1D24] rounded-[10px]">
<div className="relative w-[113px] h-[36px] bg-[#1E1D24] rounded-[6px]">
{isSearchingToken ? (
<div className="flex items-center">
<div className="flex items-center absolute left-[12px] top-[10px]">
<TailSpin width={16} height={16} />
<div className="flex font-normal desktop:text-sm tablet:text-sm mobile:text-xs xs:text-xs">
<div className="ml-2 font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white opacity-50">
Searching...
</div>
</div>
) : (
<>
<div className="flex ml-1.5 font-normal desktop:text-sm tablet:text-sm mobile:text-xs xs:text-xs justify-items-end">
Select token
</div>
<div className="flex ml-1.5">
<img
src={ArrowDown}
className="w-2 h-1"
alt="arrow-down"
/>
</div>
</>
<div className="absolute left-[12px] top-[12px] font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white">
Select token
</div>
)}
{/* Chevron */}
<div className="absolute right-[12px] top-[15px]">
<img
src={ArrowDown}
className="w-[12px] h-[6px] opacity-50"
alt="arrow-down"
/>
</div>
</div>
)}
</button>
Expand Down
52 changes: 33 additions & 19 deletions src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,52 +17,66 @@ exports[`<Buy /> > renders correctly and matches snapshot 1`] = `
type="button"
>
<div
className="flex items-center mobile:w-32 xs:w-32 desktop:w-36 h-9 bg-[#1E1D24] rounded-md"
className="relative w-[113px] h-[36px] bg-[#1E1D24] rounded-[6px] shrink-0"
data-testid="pulse-buy-token-selected-1-Test Token"
>
<div
className="relative inline-block"
className="absolute left-[6px] top-[6px] w-[24px] h-[24px]"
>
<img
alt="Main"
className="w-6 h-6 ml-1 mr-1 rounded-full"
className="w-full h-full rounded-full"
src="test-logo.png"
/>
<img
alt="Chain Logo"
className="w-2.5 h-2.5 absolute bottom-[-2px] right-[2px] rounded-full"
className="w-2.5 h-2.5 absolute -bottom-0.5 -right-0.5 rounded-full ring-1 ring-[#1E1D24]"
src="/src/assets/images/logo-ethereum.png"
/>
</div>
<div
className="flex flex-col mt-2.5 h-10 w-[91px]"
className="absolute left-[36px] top-[6px] flex items-center gap-[4px] max-w-[90px]"
>
<div
className="flex"
<p
className="font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white truncate shrink-0 max-w-[50px]"
>
<p
className="font-normal desktop:text-sm mobile:text-xs xs:text-xs"
>
TEST
</p>
</div>
TEST
</p>
<p
className="font-normal text-[12px] leading-[12px] tracking-[-0.02em] text-white opacity-30 truncate block"
>
Test Token
</p>
</div>
<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"
>
$
100.00
</p>
<div
className="flex"
className="flex items-center gap-[2px]"
>
<div
className="w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-b-[6px] border-b-[#5CFF93] opacity-50"
/>
<p
className="opacity-50 font-normal text-white h-[10px] text-[10px]"
className="font-normal text-[10px] leading-[10px] tracking-[-0.02em] opacity-50 text-[#5CFF93]"
>
$
100.00
0.05
%
</p>
</div>
</div>
<div
className="flex m-1.5"
className="absolute right-[12px] top-[15px]"
>
<img
alt="arrow-down"
className="w-2 h-1"
className="w-[12px] h-[6px] opacity-50"
src="data:image/svg+xml,%3csvg%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.5'%20d='M1%201L4.64645%204.64645C4.84171%204.84171%205.15829%204.84171%205.35355%204.64645L9%201'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e"
/>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/apps/pulse/components/Search/PortfolioTokenList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ const PortfolioTokenList = (props: PortfolioTokenListProps) => {
onClick={() => handleSort('price')}
data-testid="pulse-portfolio-header-token"
>
<p className="font-['Poppins'] text-[13px] font-normal text-white opacity-50 tracking-[-0.02em]">
<p className="text-[13px] font-normal text-white opacity-50 tracking-[-0.02em]">
Token/Price
</p>
<SortIndicator
Expand All @@ -330,7 +330,7 @@ const PortfolioTokenList = (props: PortfolioTokenListProps) => {
onClick={() => handleSort('balance')}
data-testid="pulse-portfolio-header-balance"
>
<p className="font-['Poppins'] text-[13px] font-normal text-white opacity-50 tracking-[-0.02em]">
<p className="text-[13px] font-normal text-white opacity-50 tracking-[-0.02em]">
Balance
</p>
<SortIndicator
Expand All @@ -345,7 +345,7 @@ const PortfolioTokenList = (props: PortfolioTokenListProps) => {
onClick={() => handleSort('pnl')}
data-testid="pulse-portfolio-header-pnl"
>
<p className="font-['Poppins'] text-[13px] font-normal text-white opacity-50 tracking-[-0.02em] whitespace-nowrap">
<p className="text-[13px] font-normal text-white opacity-50 tracking-[-0.02em] whitespace-nowrap">
Unrealized PnL/%
</p>
<SortIndicator
Expand Down
3 changes: 2 additions & 1 deletion src/apps/pulse/components/Search/Search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,7 +465,8 @@ export default function Search({
usdValue: formatExponentialSmallNumber(
limitDigitsNumber(item.price || 0)
),
dailyPriceChange: 0.0,
dailyPriceChange:
'price_change_24h' in item ? item.price_change_24h || 0.0 : 0.0,
chainId: selectedChainId,
decimals: selectedDecimals,
address: selectedContract,
Expand Down
6 changes: 3 additions & 3 deletions src/apps/pulse/components/Search/tests/__snapshots__/PortfolioTokenList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`<PortfolioTokenList /> > renders correctly and matches snapshot 1`] = `
onClick={[Function]}
>
<p
className="font-['Poppins'] text-[13px] font-normal text-white opacity-50 tracking-[-0.02em]"
className="text-[13px] font-normal text-white opacity-50 tracking-[-0.02em]"
>
Token/Price
</p>
Expand Down Expand Up @@ -68,7 +68,7 @@ exports[`<PortfolioTokenList /> > renders correctly and matches snapshot 1`] = `
onClick={[Function]}
>
<p
className="font-['Poppins'] text-[13px] font-normal text-white opacity-50 tracking-[-0.02em]"
className="text-[13px] font-normal text-white opacity-50 tracking-[-0.02em]"
>
Balance
</p>
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`<PortfolioTokenList /> > renders correctly and matches snapshot 1`] = `
onClick={[Function]}
>
<p
className="font-['Poppins'] text-[13px] font-normal text-white opacity-50 tracking-[-0.02em] whitespace-nowrap"
className="text-[13px] font-normal text-white opacity-50 tracking-[-0.02em] whitespace-nowrap"
>
Unrealized PnL/%
</p>
Expand Down
Loading