From e165d2ab21a092984048af2e976c9e461c535ec7 Mon Sep 17 00:00:00 2001
From: Dat Nguyen <minhdat15012002@gmail.com>
Date: Tue, 13 Aug 2024 00:51:02 +0700
Subject: [PATCH 1/2] chore: only render pnl if percentages is different than 0

---
 apps/wallet/src/components/TokenList/Item.tsx | 10 ++++++----
 apps/wallet/src/components/TotalPnL.tsx       |  6 +++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/wallet/src/components/TokenList/Item.tsx b/apps/wallet/src/components/TokenList/Item.tsx
index 26935d4fd..3107e164f 100644
--- a/apps/wallet/src/components/TokenList/Item.tsx
+++ b/apps/wallet/src/components/TokenList/Item.tsx
@@ -15,14 +15,17 @@ interface Props {
 }
 
 export const TokenItem: FC<Props> = ({ style, token, onPress, tokenPnL }) => {
-	const pnl = tokenPnL?.priceChangePercentage24H || 0;
+	const pnl = tokenPnL?.priceChangePercentage24H ?? 0;
 	const { symbol, image, quotes, balance } = token;
 	const unitQuote = quotes?.usd;
 	const totalQuote = unitQuote && unitQuote * balance;
+
 	const iconSource = image ? { uri: image } : assets.misc.unknownToken;
+	const fixedPnL = Math.round(pnl * 10000) / 10000;
 
 	const itemName = symbol || 'Unknown';
-	const isLost = pnl && pnl < 0;
+	const isLost = fixedPnL < 0;
+	const isProfit = fixedPnL > 0;
 
 	return (
 		<Hoverable style={[styles.container, style]} onPress={onPress}>
@@ -32,8 +35,7 @@ export const TokenItem: FC<Props> = ({ style, token, onPress, tokenPnL }) => {
 				<View style={styles.unitQuoteContainer}>
 					<Text style={styles.secondaryText}>{formatQuote(unitQuote)}</Text>
 					<Text style={isLost ? styles.lostText : styles.profitText}>
-						{isLost ? '-' : '+'}{' '}
-						{Math.abs(Math.round(pnl * 10000) / 10000 ?? 0)}%
+						{isLost ? `-${-fixedPnL}` : isProfit ? `+${fixedPnL}` : null}
 					</Text>
 				</View>
 			</View>
diff --git a/apps/wallet/src/components/TotalPnL.tsx b/apps/wallet/src/components/TotalPnL.tsx
index 80141b69f..88c1cff88 100644
--- a/apps/wallet/src/components/TotalPnL.tsx
+++ b/apps/wallet/src/components/TotalPnL.tsx
@@ -10,6 +10,7 @@ interface Props {
 
 const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
 	const isLost = value < 0;
+	const isProfit = value > 0;
 
 	return (
 		<View style={styles.container}>
@@ -24,7 +25,7 @@ const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
 							: styles.lightThemeProfitValue
 				}
 			>
-				{isLost ? `-$${-value}` : `+$${value}`}
+				{isLost ? `-$${-value}` : isProfit ? `+$${value}` : null}
 			</Text>
 			<View
 				style={[
@@ -49,8 +50,7 @@ const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
 								: styles.lightThemeProfitPercentage
 					}
 				>
-					{!isLost && '+'}
-					{percentage}%
+					{isLost ? `${percentage}%` : isProfit ? `+${percentage}%` : null}
 				</Text>
 			</View>
 		</View>

From f02ae39b2503023c637fe1ae7a0ffa932768e1c9 Mon Sep 17 00:00:00 2001
From: Dat Nguyen <minhdat15012002@gmail.com>
Date: Tue, 13 Aug 2024 01:18:43 +0700
Subject: [PATCH 2/2] feat: revise pnl colors based on figma styles

---
 apps/wallet/src/components/TotalPnL.tsx | 82 +++++++------------------
 1 file changed, 21 insertions(+), 61 deletions(-)

diff --git a/apps/wallet/src/components/TotalPnL.tsx b/apps/wallet/src/components/TotalPnL.tsx
index 88c1cff88..1e0d02a23 100644
--- a/apps/wallet/src/components/TotalPnL.tsx
+++ b/apps/wallet/src/components/TotalPnL.tsx
@@ -15,41 +15,23 @@ const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
 	return (
 		<View style={styles.container}>
 			<Text
-				style={
-					isDarkTheme
-						? isLost
-							? styles.darkThemeLostValue
-							: styles.darkThemeProfitValue
-						: isLost
-							? styles.lightThemeLostValue
-							: styles.lightThemeProfitValue
-				}
+				style={[
+					styles.pnlTextBase,
+					styles.pnlValueBase,
+					isDarkTheme ? styles.darkThemePnLText : styles.lightThemePnLText,
+				]}
 			>
-				{isLost ? `-$${-value}` : isProfit ? `+$${value}` : null}
+				{isLost ? `≈ -$${-value}` : isProfit ? `≈ +$${value}` : null}
 			</Text>
 			<View
 				style={[
-					styles.percentageContainer,
-					isDarkTheme
-						? isLost
-							? styles.darkThemeLostPercentageContainer
-							: styles.darkThemeProfitPercentageContainer
-						: isLost
-							? styles.lightThemeLostPercentageContainer
-							: styles.lightThemeProfitPercentageContainer,
+					styles.percentageContainerBase,
+					isLost
+						? styles.LostPercentageContainer
+						: styles.ProfitPercentageContainer,
 				]}
 			>
-				<Text
-					style={
-						isDarkTheme
-							? isLost
-								? styles.darkThemeLostPercentage
-								: styles.darkThemeProfitPercentage
-							: isLost
-								? styles.lightThemeLostPercentage
-								: styles.lightThemeProfitPercentage
-					}
-				>
+				<Text style={[styles.pnlTextBase]}>
 					{isLost ? `${percentage}%` : isProfit ? `+${percentage}%` : null}
 				</Text>
 			</View>
@@ -65,49 +47,27 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		gap: 8,
 	},
-	lightThemeProfitValue: {
-		color: '#60C591',
-		fontSize: 20,
-	},
-	darkThemeProfitValue: {
+	pnlTextBase: {
 		color: '#ffffff',
-		fontSize: 20,
 	},
-	lightThemeLostValue: {
-		color: '#AE3939',
+	pnlValueBase: {
 		fontSize: 20,
 	},
-	darkThemeLostValue: {
-		color: '#ffffff',
-		fontSize: 20,
+	darkThemePnLText: {
+		color: '#babdc0',
 	},
-	lightThemeProfitPercentage: {
-		color: '#60C591',
-	},
-	lightThemeLostPercentage: {
-		color: '#AE3939',
-	},
-	darkThemeProfitPercentage: {
-		color: '#ffffff',
-	},
-	darkThemeLostPercentage: {
+	lightThemePnLText: {
 		color: '#ffffff',
 	},
-	percentageContainer: {
+	percentageContainerBase: {
 		borderRadius: 4,
 		paddingVertical: 4,
 		paddingHorizontal: 8,
 	},
-	lightThemeProfitPercentageContainer: {
-		backgroundColor: '#AE393933',
-	},
-	darkThemeProfitPercentageContainer: {
-		backgroundColor: '#2A9960',
-	},
-	lightThemeLostPercentageContainer: {
-		backgroundColor: '#AE393933',
+	ProfitPercentageContainer: {
+		backgroundColor: '#29985F',
 	},
-	darkThemeLostPercentageContainer: {
-		backgroundColor: '#941200',
+	LostPercentageContainer: {
+		backgroundColor: '#DB1901',
 	},
 });