From 16695796acd85a3da455cea2343e534af8e2aae6 Mon Sep 17 00:00:00 2001 From: aldin4u Date: Tue, 16 Dec 2025 12:59:58 +0000 Subject: [PATCH 01/13] fix: truncate pulse token selector symbol and add price change --- src/apps/pulse/components/Buy/Buy.tsx | 44 +++++++++++-------- .../Buy/tests/__snapshots__/Buy.test.tsx.snap | 13 ++++-- 2 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/apps/pulse/components/Buy/Buy.tsx b/src/apps/pulse/components/Buy/Buy.tsx index c8edb6bc..471718bd 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) { @@ -667,8 +667,8 @@ export default function Buy(props: BuyProps) { />
-
-

+

+

{token.symbol}

{token.symbol.length + token.name.length <= 13 && ( @@ -677,10 +677,19 @@ export default function Buy(props: BuyProps) {

)}
-
+

${token.usdValue}

+

= 0 + ? 'text-[#00FF00]' + : 'text-[#FF0000]' + }`} + > + {token.dailyPriceChange > 0 ? '+' : ''} + {token.dailyPriceChange.toFixed(2)}% +

@@ -823,11 +832,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" >
Date: Tue, 16 Dec 2025 16:16:10 +0000 Subject: [PATCH 02/13] feat: Refine Pulse Token Selector UI & Fix 'My Holdings' Price Change - Refine Token Selector UI in Buy.tsx and Sell.tsx to match Figma specs. - Fix missing price change for 'My Holdings' tokens in Search.tsx. - Add green/red triangle indicator for price changes. - Increase token selector dropdown arrow size. - Redirect unauthenticated users from /pulse to /. - Update snapshots. --- src/apps/pulse/components/Buy/Buy.tsx | 133 ++++++++++-------- .../Buy/tests/__snapshots__/Buy.test.tsx.snap | 57 ++++---- src/apps/pulse/components/Search/Search.tsx | 3 +- src/apps/pulse/components/Sell/Sell.tsx | 110 +++++++++------ .../tests/__snapshots__/Sell.test.tsx.snap | 60 ++++---- src/containers/Main.tsx | 2 +- 6 files changed, 216 insertions(+), 149 deletions(-) diff --git a/src/apps/pulse/components/Buy/Buy.tsx b/src/apps/pulse/components/Buy/Buy.tsx index 471718bd..2edf3005 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) { @@ -642,83 +642,103 @@ export default function Buy(props: BuyProps) { > {token ? (
-
+ {/* Logo */} +
{token.logo ? ( Main ) : ( -
+
- + {token.name?.slice(0, 2)}
)} Chain Logo
-
-
-

- {token.symbol} -

- {token.symbol.length + token.name.length <= 13 && ( -

- {token.name} -

+ + {/* Top Row: Symbol and Name */} +
+

+ {token.symbol} +

+

+ {token.name} +

+
+ + {/* Bottom Row: Price and Change */} +
+

+ ${token.usdValue} +

+ +
+ {/* Triangle Indicator */} + {token.dailyPriceChange !== 0 && ( +
= 0 + ? 'border-b-[6px] border-b-[#5CFF93]' + : 'border-t-[6px] border-t-[#FF366C]' + } opacity-50`} + /> )} -
-
-

- ${token.usdValue} -

+

= 0 - ? 'text-[#00FF00]' - : 'text-[#FF0000]' - }`} + className={`font-['Poppins'] font-normal text-[10px] leading-[10px] tracking-[-0.02em] opacity-50 ${ + token.dailyPriceChange >= 0 + ? 'text-[#5CFF93]' + : 'text-[#FF366C]' + }`} > - {token.dailyPriceChange > 0 ? '+' : ''} - {token.dailyPriceChange.toFixed(2)}% + {Math.abs(token.dailyPriceChange).toFixed(1)}%

-
- arrow-down + + {/* Chevron */} +
+ arrow-down
) : ( -
+
{isSearchingToken ? (
-
+
Searching...
) : ( - <> -
- Select token -
-
- arrow-down -
- +
+ Select token +
)} + {/* Chevron */} +
+ arrow-down +
)} @@ -832,10 +852,11 @@ 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" >
`; From 0c85f4c207e7c1a946c127b0422ce4859a6c8252 Mon Sep 17 00:00:00 2001 From: aldin4u Date: Thu, 18 Dec 2025 11:25:07 +0000 Subject: [PATCH 04/13] fix(pulse): add missing relative class to token selector placeholder in Sell.tsx --- src/apps/pulse/components/Sell/Sell.tsx | 44 +++++++++++-------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/src/apps/pulse/components/Sell/Sell.tsx b/src/apps/pulse/components/Sell/Sell.tsx index 42e8a359..f99c97f7 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 ); @@ -356,20 +356,18 @@ const Sell = (props: SellProps) => { {/* Triangle Indicator */} {token.dailyPriceChange !== 0 && (
= 0 + 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`} + } opacity-50`} /> )}

= 0 + className={`font-['Poppins'] font-normal text-[10px] leading-[10px] tracking-[-0.02em] opacity-50 ${token.dailyPriceChange >= 0 ? 'text-[#5CFF93]' : 'text-[#FF366C]' - }`} + }`} > {Math.abs(token.dailyPriceChange).toFixed(1)}%

@@ -386,7 +384,7 @@ 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" > -
-`; From c382ba9c213744fe6c82f78a8a381e5bf0446e23 Mon Sep 17 00:00:00 2001 From: aldin4u Date: Thu, 18 Dec 2025 12:35:49 +0000 Subject: [PATCH 11/13] fix(lint): remove unused renderer import and fix formatting in CardSwap.test.tsx --- .../the-exchange/components/CardsSwap/test/CardSwap.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx b/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx index 77b7834a..94d0e77f 100644 --- a/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx +++ b/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx @@ -1,5 +1,4 @@ import { render, screen, within } from '@testing-library/react'; -import renderer from 'react-test-renderer'; import { vi } from 'vitest'; // store @@ -169,7 +168,6 @@ describe('', () => { store.dispatch(setUsdPriceReceiveToken(100)); }); - describe('Default State Rendering', () => { it('renders the component container', () => { render( From 9ce43073c1942d269597bb4f5535ccaf61f8d3ad Mon Sep 17 00:00:00 2001 From: Vignesh Date: Thu, 18 Dec 2025 20:36:27 +0530 Subject: [PATCH 12/13] changes as per feedback --- .../__snapshots__/AppWrapper.test.tsx.snap | 2 +- .../__snapshots__/HomeScreen.test.tsx.snap | 2 +- src/apps/pulse/components/Buy/Buy.tsx | 12 +- .../Buy/tests/__snapshots__/Buy.test.tsx.snap | 8 +- .../components/Search/PortfolioTokenList.tsx | 6 +- .../PortfolioTokenList.test.tsx.snap | 6 +- src/apps/pulse/components/Sell/Sell.tsx | 10 +- .../tests/__snapshots__/Sell.test.tsx.snap | 8 +- .../CardsSwap/test/CardSwap.test.tsx | 15 ++ .../test/__snapshots__/CardSwap.test.tsx.snap | 184 ++++++++++++++++++ 10 files changed, 226 insertions(+), 27 deletions(-) create mode 100644 src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap diff --git a/src/apps/pulse/components/App/tests/__snapshots__/AppWrapper.test.tsx.snap b/src/apps/pulse/components/App/tests/__snapshots__/AppWrapper.test.tsx.snap index e8c70816..8de4fe84 100644 --- a/src/apps/pulse/components/App/tests/__snapshots__/AppWrapper.test.tsx.snap +++ b/src/apps/pulse/components/App/tests/__snapshots__/AppWrapper.test.tsx.snap @@ -139,7 +139,7 @@ exports[` > renders correctly and matches snapshot 1`] = ` className="relative w-[113px] h-[36px] bg-[#1E1D24] rounded-[6px]" >
Select token
diff --git a/src/apps/pulse/components/App/tests/__snapshots__/HomeScreen.test.tsx.snap b/src/apps/pulse/components/App/tests/__snapshots__/HomeScreen.test.tsx.snap index 5d86c05a..38b947a4 100644 --- a/src/apps/pulse/components/App/tests/__snapshots__/HomeScreen.test.tsx.snap +++ b/src/apps/pulse/components/App/tests/__snapshots__/HomeScreen.test.tsx.snap @@ -139,7 +139,7 @@ exports[` > renders correctly and matches snapshot 1`] = ` className="relative w-[113px] h-[36px] bg-[#1E1D24] rounded-[6px]" >
Select token
diff --git a/src/apps/pulse/components/Buy/Buy.tsx b/src/apps/pulse/components/Buy/Buy.tsx index df19851b..e9a3832c 100644 --- a/src/apps/pulse/components/Buy/Buy.tsx +++ b/src/apps/pulse/components/Buy/Buy.tsx @@ -670,17 +670,17 @@ export default function Buy(props: BuyProps) { {/* Top Row: Symbol and Name */}
-

+

{token.symbol}

-

+

{token.name}

{/* Bottom Row: Price and Change */}
-

+

${token.usdValue}

@@ -697,7 +697,7 @@ export default function Buy(props: BuyProps) { )}

= 0 ? 'text-[#5CFF93]' : 'text-[#FF366C]' @@ -722,12 +722,12 @@ export default function Buy(props: BuyProps) { {isSearchingToken ? (

-
+
Searching...
) : ( -
+
Select token
)} diff --git a/src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap b/src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap index 256b1f85..97f0afce 100644 --- a/src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap +++ b/src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap @@ -38,12 +38,12 @@ exports[` > renders correctly and matches snapshot 1`] = ` className="absolute left-[36px] top-[6px] flex items-center gap-[4px] max-w-[90px]" >

TEST

Test Token

@@ -52,7 +52,7 @@ exports[` > renders correctly and matches snapshot 1`] = ` className="absolute left-[36px] top-[20px] flex items-center gap-[6px]" >

$ 100.00 @@ -64,7 +64,7 @@ exports[` > renders correctly and matches snapshot 1`] = ` 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" />

0.1 % diff --git a/src/apps/pulse/components/Search/PortfolioTokenList.tsx b/src/apps/pulse/components/Search/PortfolioTokenList.tsx index a3787d7b..02d6b0d3 100644 --- a/src/apps/pulse/components/Search/PortfolioTokenList.tsx +++ b/src/apps/pulse/components/Search/PortfolioTokenList.tsx @@ -315,7 +315,7 @@ const PortfolioTokenList = (props: PortfolioTokenListProps) => { onClick={() => handleSort('price')} data-testid="pulse-portfolio-header-token" > -

+

Token/Price

{ onClick={() => handleSort('balance')} data-testid="pulse-portfolio-header-balance" > -

+

Balance

{ onClick={() => handleSort('pnl')} data-testid="pulse-portfolio-header-pnl" > -

+

Unrealized PnL/%

> renders correctly and matches snapshot 1`] = ` onClick={[Function]} >

Token/Price

@@ -68,7 +68,7 @@ exports[` > renders correctly and matches snapshot 1`] = ` onClick={[Function]} >

Balance

@@ -119,7 +119,7 @@ exports[` > renders correctly and matches snapshot 1`] = ` onClick={[Function]} >

Unrealized PnL/%

diff --git a/src/apps/pulse/components/Sell/Sell.tsx b/src/apps/pulse/components/Sell/Sell.tsx index bb4d8527..1dfb1fca 100644 --- a/src/apps/pulse/components/Sell/Sell.tsx +++ b/src/apps/pulse/components/Sell/Sell.tsx @@ -330,13 +330,13 @@ const Sell = (props: SellProps) => { {/* Top Row: Symbol and Name */}

{token.symbol}

{token.name} @@ -346,7 +346,7 @@ const Sell = (props: SellProps) => { {/* Bottom Row: Price and Change */}

${formatExponentialSmallNumber(token.usdValue)} @@ -365,7 +365,7 @@ const Sell = (props: SellProps) => { )}

= 0 ? 'text-[#5CFF93]' : 'text-[#FF366C]' @@ -388,7 +388,7 @@ const Sell = (props: SellProps) => { ) : (

Select token diff --git a/src/apps/pulse/components/Sell/tests/__snapshots__/Sell.test.tsx.snap b/src/apps/pulse/components/Sell/tests/__snapshots__/Sell.test.tsx.snap index 7c6fe602..9b9e2cb1 100644 --- a/src/apps/pulse/components/Sell/tests/__snapshots__/Sell.test.tsx.snap +++ b/src/apps/pulse/components/Sell/tests/__snapshots__/Sell.test.tsx.snap @@ -39,13 +39,13 @@ exports[` > renders correctly and matches snapshot 1`] = ` class="absolute left-[36px] top-[6px] flex items-center gap-[4px] max-w-[90px]" >

TEST

Test Token @@ -55,7 +55,7 @@ exports[` > renders correctly and matches snapshot 1`] = ` class="absolute left-[36px] top-[20px] flex items-center gap-[6px]" >

$ @@ -68,7 +68,7 @@ exports[` > renders correctly and matches snapshot 1`] = ` class="w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-b-[6px] border-b-[#5CFF93] opacity-50" />

0.1 % diff --git a/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx b/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx index 94d0e77f..315dc420 100644 --- a/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx +++ b/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx @@ -1,4 +1,5 @@ import { render, screen, within } from '@testing-library/react'; +import renderer from 'react-test-renderer'; import { vi } from 'vitest'; // store @@ -168,6 +169,20 @@ describe('', () => { store.dispatch(setUsdPriceReceiveToken(100)); }); + describe('Rendering and Snapshot', () => { + it('renders correctly and matches snapshot', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); + }); + describe('Default State Rendering', () => { it('renders the component container', () => { render( diff --git a/src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap b/src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap new file mode 100644 index 00000000..85ae4749 --- /dev/null +++ b/src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap @@ -0,0 +1,184 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[` > Rendering and Snapshot > renders correctly and matches snapshot 1`] = ` +

+
+
+
+
+

+ Ether +

+

+ On Ethereum +

+

+ 4 + + + $ + 0.4000 + +

+
+
+
+ token-logo +
+
+ chain-logo +
+
+
+
+

+ ETH +

+ +
+

+ $ + 0.00 +

+ Send +
+
+
+
+
+
+

+ POL +

+

+ On Polygon +

+
+
+
+ token-logo +
+
+ chain-logo +
+
+
+
+

+ POL +

+
+

+ $ + 0.00 +

+ Receive +
+
+
+
+
+`; From 3dd6f777dec35608d62792cff5703933562557e3 Mon Sep 17 00:00:00 2001 From: Vignesh Date: Thu, 18 Dec 2025 20:47:15 +0530 Subject: [PATCH 13/13] changes as per feedback --- src/apps/pulse/components/Buy/Buy.tsx | 2 +- .../pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap | 2 +- src/apps/pulse/components/Sell/Sell.tsx | 2 +- .../components/Sell/tests/__snapshots__/Sell.test.tsx.snap | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/apps/pulse/components/Buy/Buy.tsx b/src/apps/pulse/components/Buy/Buy.tsx index e9a3832c..9e56be2c 100644 --- a/src/apps/pulse/components/Buy/Buy.tsx +++ b/src/apps/pulse/components/Buy/Buy.tsx @@ -703,7 +703,7 @@ export default function Buy(props: BuyProps) { : 'text-[#FF366C]' }`} > - {Math.abs(token.dailyPriceChange).toFixed(1)}% + {Math.abs(token.dailyPriceChange).toFixed(2)}%

diff --git a/src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap b/src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap index 97f0afce..aa7a9e8c 100644 --- a/src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap +++ b/src/apps/pulse/components/Buy/tests/__snapshots__/Buy.test.tsx.snap @@ -66,7 +66,7 @@ exports[` > renders correctly and matches snapshot 1`] = `

- 0.1 + 0.05 %

diff --git a/src/apps/pulse/components/Sell/Sell.tsx b/src/apps/pulse/components/Sell/Sell.tsx index 1dfb1fca..fca1ad37 100644 --- a/src/apps/pulse/components/Sell/Sell.tsx +++ b/src/apps/pulse/components/Sell/Sell.tsx @@ -371,7 +371,7 @@ const Sell = (props: SellProps) => { : 'text-[#FF366C]' }`} > - {Math.abs(token.dailyPriceChange).toFixed(1)}% + {Math.abs(token.dailyPriceChange).toFixed(2)}%

diff --git a/src/apps/pulse/components/Sell/tests/__snapshots__/Sell.test.tsx.snap b/src/apps/pulse/components/Sell/tests/__snapshots__/Sell.test.tsx.snap index 9b9e2cb1..0ba99cea 100644 --- a/src/apps/pulse/components/Sell/tests/__snapshots__/Sell.test.tsx.snap +++ b/src/apps/pulse/components/Sell/tests/__snapshots__/Sell.test.tsx.snap @@ -70,7 +70,7 @@ exports[` > renders correctly and matches snapshot 1`] = `

- 0.1 + 0.05 %