From b494034e32b57884b029aba4c787dfc09973af27 Mon Sep 17 00:00:00 2001
From: Dat Nguyen <minhdat15012002@gmail.com>
Date: Sun, 18 Aug 2024 23:56:18 +0700
Subject: [PATCH 1/3] fix: not render PnL if value is 0

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

diff --git a/apps/wallet/src/components/TotalPnL.tsx b/apps/wallet/src/components/TotalPnL.tsx
index 1e0d02a23..d6955e13d 100644
--- a/apps/wallet/src/components/TotalPnL.tsx
+++ b/apps/wallet/src/components/TotalPnL.tsx
@@ -13,29 +13,31 @@ const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
 	const isProfit = value > 0;
 
 	return (
-		<View style={styles.container}>
-			<Text
-				style={[
-					styles.pnlTextBase,
-					styles.pnlValueBase,
-					isDarkTheme ? styles.darkThemePnLText : styles.lightThemePnLText,
-				]}
-			>
-				{isLost ? `≈ -$${-value}` : isProfit ? `≈ +$${value}` : null}
-			</Text>
-			<View
-				style={[
-					styles.percentageContainerBase,
-					isLost
-						? styles.LostPercentageContainer
-						: styles.ProfitPercentageContainer,
-				]}
-			>
-				<Text style={[styles.pnlTextBase]}>
-					{isLost ? `${percentage}%` : isProfit ? `+${percentage}%` : null}
+		value !== 0 && (
+			<View style={styles.container}>
+				<Text
+					style={[
+						styles.pnlTextBase,
+						styles.pnlValueBase,
+						isDarkTheme ? styles.darkThemePnLText : styles.lightThemePnLText,
+					]}
+				>
+					{isLost ? `≈ -$${-value}` : isProfit ? `≈ +$${value}` : null}
 				</Text>
+				<View
+					style={[
+						styles.percentageContainerBase,
+						isLost
+							? styles.LostPercentageContainer
+							: styles.ProfitPercentageContainer,
+					]}
+				>
+					<Text style={[styles.pnlTextBase]}>
+						{isLost ? `${percentage}%` : isProfit ? `+${percentage}%` : null}
+					</Text>
+				</View>
 			</View>
-		</View>
+		)
 	);
 };
 

From 5c36208d59b7d4abe080f5d709a119c9c48ff8a9 Mon Sep 17 00:00:00 2001
From: Dat Nguyen <minhdat15012002@gmail.com>
Date: Wed, 11 Sep 2024 22:45:01 +0700
Subject: [PATCH 2/3] chore: revise logic to render pnl

---
 apps/wallet/src/components/TotalPnL.tsx       | 20 ++++++++++++++-----
 apps/wallet/src/features/Home/TokenValue.tsx  |  5 +++--
 .../BuiltInNetwork/WalletCard/Balance.tsx     |  7 ++++---
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/apps/wallet/src/components/TotalPnL.tsx b/apps/wallet/src/components/TotalPnL.tsx
index d6955e13d..b771f336e 100644
--- a/apps/wallet/src/components/TotalPnL.tsx
+++ b/apps/wallet/src/components/TotalPnL.tsx
@@ -6,14 +6,24 @@ interface Props {
 	value: number;
 	percentage: number;
 	isDarkTheme: boolean;
+	numDigit: number;
 }
 
-const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
+const TotalPnL: FC<Props> = ({
+	value,
+	percentage,
+	isDarkTheme = false,
+	numDigit = 2,
+}) => {
+	if (numDigit <= 0) { numDigit = 2 }
+	const baseDigit = 10 ** numDigit;
+	value = Math.round(value * baseDigit) / baseDigit;
+	percentage = Math.round(percentage * baseDigit) / baseDigit;
 	const isLost = value < 0;
 	const isProfit = value > 0;
 
-	return (
-		value !== 0 && (
+	if (percentage !== 0) {
+		return (
 			<View style={styles.container}>
 				<Text
 					style={[
@@ -37,8 +47,8 @@ const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
 					</Text>
 				</View>
 			</View>
-		)
-	);
+		);
+	}
 };
 
 export default TotalPnL;
diff --git a/apps/wallet/src/features/Home/TokenValue.tsx b/apps/wallet/src/features/Home/TokenValue.tsx
index 4a9b629f3..3338f5ead 100644
--- a/apps/wallet/src/features/Home/TokenValue.tsx
+++ b/apps/wallet/src/features/Home/TokenValue.tsx
@@ -35,9 +35,10 @@ const TokenValue: FC<Props> = ({ value }) => {
 					</Hoverable>
 				</View>
 				<TotalPnL
-					value={Math.round(pnl * 100) / 100}
-					percentage={Math.round(pnlRates * 100) / 100}
+					value={pnl}
+					percentage={pnlRates}
 					isDarkTheme={true}
+					numDigit={2}
 				/>
 			</View>
 		</View>
diff --git a/apps/wallet/src/features/Widget/BuiltInNetwork/WalletCard/Balance.tsx b/apps/wallet/src/features/Widget/BuiltInNetwork/WalletCard/Balance.tsx
index 3cb45ba46..5a15e55f6 100644
--- a/apps/wallet/src/features/Widget/BuiltInNetwork/WalletCard/Balance.tsx
+++ b/apps/wallet/src/features/Widget/BuiltInNetwork/WalletCard/Balance.tsx
@@ -36,9 +36,10 @@ export const WalletBalance: FC<Props> = ({
 			</View>
 			<View style={styles.pnLContainer}>
 				<TotalPnL
-					value={Math.round(pnl * 100) / 100}
-					percentage={Math.round(pnlRates * 100) / 100}
-					isDarkTheme={false}
+					value={pnl}
+					percentage={pnlRates}
+					isDarkTheme={true}
+					numDigit={4}
 				/>
 			</View>
 		</View>

From c02fbe637673e1e1cbeb877b0df51b5b0e6343fc Mon Sep 17 00:00:00 2001
From: Dat Nguyen <minhdat15012002@gmail.com>
Date: Wed, 11 Sep 2024 22:46:25 +0700
Subject: [PATCH 3/3] chore: fix lint

---
 apps/wallet/src/components/TotalPnL.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/wallet/src/components/TotalPnL.tsx b/apps/wallet/src/components/TotalPnL.tsx
index b771f336e..179485835 100644
--- a/apps/wallet/src/components/TotalPnL.tsx
+++ b/apps/wallet/src/components/TotalPnL.tsx
@@ -15,7 +15,9 @@ const TotalPnL: FC<Props> = ({
 	isDarkTheme = false,
 	numDigit = 2,
 }) => {
-	if (numDigit <= 0) { numDigit = 2 }
+	if (numDigit <= 0) {
+		numDigit = 2;
+	}
 	const baseDigit = 10 ** numDigit;
 	value = Math.round(value * baseDigit) / baseDigit;
 	percentage = Math.round(percentage * baseDigit) / baseDigit;