Merge pull request #611 from cocrafts/dev

[wallet] chore(dev sync): update pnl
cocrafts · Aug 15, 2024 · ce7fdba · ce7fdba
2 parents aa2c548 + 3056a09
commit ce7fdba
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 67 deletions.
diff --git 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
@@ -10,47 +10,29 @@ interface Props {
 
 const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
 	const isLost = value < 0;
+	const isProfit = value > 0;
 
 	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}` : `+$${value}`}
+				{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
-					}
-				>
-					{!isLost && '+'}
-					{percentage}%
+				<Text style={[styles.pnlTextBase]}>
+					{isLost ? `${percentage}%` : isProfit ? `+${percentage}%` : null}
 				</Text>
 			</View>
 		</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',
 	},
 });